栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

我可以仅对div的背景图像设置不透明度吗?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

我可以仅对div的背景图像设置不透明度吗?

不,这无法完成,因为

opacity
会影响整个元素(包括其内容),并且无法更改此行为。您可以使用以下两种方法解决此问题。

Secondary div

将另一个

div
元素添加到容器中以保留背景。这是跨浏览器最友好的方法,即使在IE6上也可以使用。

的HTML

<div >    <div ></div>    Hi there</div>

CSS

.myDiv {    position: relative;    z-index: 1;}.myDiv .bg {    position: absolute;    z-index: -1;    top: 0;    bottom: 0;    left: 0;    right: 0;    background: url(test.jpg) center center;    opacity: .4;    width: 100%;    height: 100%;}

:before和:: before伪元素

另一个技巧是使用CSS 2.1

:before
或CSS3
::before
伪元素。
:before
IE从版本8开始支持伪元素,而
::before
完全不支持伪元素。希望它将在版本10中得到纠正。

HTML

<div >    Hi there</div>

CSS

.myDiv {    position: relative;    z-index: 1;}.myDiv:before {    content: "";    position: absolute;    z-index: -1;    top: 0;    bottom: 0;    left: 0;    right: 0;    background: url(test.jpg) center center;    opacity: .4;}

补充笔记

由于您的行为,

z-index
您将必须为容器设置z-index以及为
z-index
背景图像设置负值。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432533.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号