设置父容器透明度,子元素不透明

opacity

我们都知道,在做弹窗时有这么一种问题,就是如果你设置了父容器的opacity的值,子类也是跟着透明的,我他妈的以前怎么解决的,我自己好像也忘了,最近在写一个打字的小游戏,在写的时候专门Google下,觉得自己还是记录下来吧!这个blog也许我觉得就是记录这些以前总是被自己忽略的小地方,技术积累也许就这么积累下来了。

首先,从收集上来的可以设置元素透明度的有下面几个:

  1. 设置opacity值,0到1(IE6~8不支持)
  2. IE的专属滤镜filter:Alpha(opacity=x), x取值0到100
  3. rgba来设置,a取值0到1(IE6~8不支持)

下面就通过这些展开来说,从最简单的rgba来。

现在的浏览器格局大不像以前,尤其在移动端,所以其实只要你的公司已经抛弃了这些老浏览器(特指IE6~8),rgba就会你的首选。

1
2
3
<div class="father">
<div class="child">dkfjlsdkjafl</div>
</div>
1
2
3
4
5
6
.father {
width: 200px;
height: 200px;
color: blue;
background-color: rgba(0, 0, 0, .8);
}

这样使用完全没有了后顾之忧,你再也不必担心子类也跟透明的问题了。

除了上面这个,你要使用opacity的话,就会出现子类也跟着透明的问题。你非要执意要这么做,就得改变结构,像Photoshop的图层一样,再加个透明子元素,内容在另一个子元素,两者最后绝对定位叠加一下。

1
2
3
4
<div class="father">
<div class="sub-father"></div>
<div class="child">dkfjlsdkjafl</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.father {
position: relative;
width: 200px;
height: 200px;
color: blue;
}
.sub-father {
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
}
.child {
position: absolute;
top: 0;
left: 0;
}

最后,就是IE的妖精们了,这些既不支持rgba也不支持opacity,他们有的只是IE的滤镜。可悲的是滤镜在IE10以后被废了!

于是有这么几个问题:

  1. 仅支持IE6、7、8、9,在IE10版本被废除
  2. 在IE6、7中,需要激活IE的haslayout属性(如:zoom:1或者overflow:hidden),让它读懂filter:Alpha
  3. 在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position:static(默认属性),其子元素为相对定位,可让子元素不透明
IE6 IE7 IE8 IE9 标准浏览器
rgba NO NO NO YES YES
filter:Alpha YES YES YES YES NO

所以想都兼容了就得用IE的hack了,这个我其实也不是很了解,这些都有待验证……

1
2
3
<div class="father">
<div class="child">dkfjlsdkjafl</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 回来找个机器试试+_+! */
.father {
padding: 25px;
background-color: rgba(0, 0, 0, 0.5); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.child {
color: #FFFFFF;
}
@media \0screen\,screen\9 {
/* 只支持IE6、7、8 */
.father {
background-color: #000000;
filter:Alpha(opacity= 50);
position: static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
*zoom: 1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
.child {
position: relative; /* 设置子元素为相对定位,可让子元素不继承Alpha值 */
}
}

想想巨硬(微软)都放弃治疗了,有时我们也该放弃这些本该放弃的东西,每次都被这些羁绊着,不值得。因为赶上一个时代的尾巴,思维总是有点放不开的感觉,觉得以后还是要放开点。