第一天,谈谈【透明】


原文链接: 第一天,谈谈【透明】

提到透明,大家首先会想到opacity。先来看测试用例一:

.case{
    /*省略无关样式*/
    background-color: red;
    opacity: 0.5;
}

在支持opacity的浏览器里效果如下:

opacity in chrome

opacity的兼容性如下图:

opacity compatible

在不支持opacity的IE6、7、8中效果如下:

opacity in ie 8

为了兼容IE6、7、8,需要使用filter:alpha(opacity=..),来看测试用例二:

.case{
    /*省略无关样式*/
    background-color: red;
    filter:alpha(opacity=50);/* for IE8 and earlier */
    opacity: 0.5;/* for IE9 and other browsers */
}

在IE6中效果如下,(IE7、8也相同)

opacity in ie6 fixed

但是opacity会引起一些副作用,来看测试用例三:

.case{
    /*省略无关样式*/
    background-color: red;
    filter:alpha(opacity=50);
    opacity: 0.5;
}
.inner{
    /*省略无关样式*/
    background-color: blue;
    color: #000;
}

效果如下:(仔细看,最内层元素里是有文字的)

opacity in chrome inner

可以看到,透明元素包含的子元素也透明了,尽管已经将子元素的color设置为#000,但文字还是透明到看不清楚。

这很可能不是你想要的效果,那么为了避免子元素受影响,我们需要用到CSS3提供的RGBA(R,G,B,A)
通过最后的参数A(Alpha通道),可以设置元素的透明度。测试用例四:

.case{
    /*省略无关样式*/
    border:1px solid #000;
    background:rgba(255,0,0,0.5);
}

显示效果如下:

rgba in chrome

但是在IE6、7、8中显示如下:

rgba in ie6

RGBA(R,G,B,A)的兼容性如下:

rgba compatible

为了兼容IE6、7、8,我们需要用到DXImageTransform.Microsoft.gradient滤镜,来看测试用例五:

.case{
    /*省略无关样式*/
    border:1px solid #000;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
    background:rgba(255,0,0,0.5);
}

此时在IE6中效果如下:

rgba ie 6 fixed

简单解释下:要给DXImageTransform.Microsoft.gradient滤镜设置起点色(startColorstr)和终点色(endColorstr),在此我们只想让它透明而无需渐变,只需让起点色和终点色相同。需要注意的是,它们的取值是一个八位的十六进制值,前两位表示alpha通道值,00表示完全透明,FF表示完全不透明;后六位则是这个颜色的RGB值。

我们再次给透明元素添加一个子元素,测试用例六:

.case{
    /*省略无关样式*/
    border:1px solid #000;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
    background:rgba(255,0,0,0.5);
}
.inner {
    /*省略无关样式*/
    color: #000;
    background-color: blue;
}

效果如下:(IE7、8相同)

rgba-ie6-fixed-inner

但是IE9却稍有不同,如下:

enter image description here

我们可以发现,在IE9中透明元素的颜色与其他浏览器稍有偏差,原因我们以后再探究。

为了保险起见,我们还可以增加一个fallback(后备)颜色,也就是不透明时的颜色,如果某个浏览器不支持透明,就会显示这个颜色。代码如下:

.case{
    /*省略无关样式*/
    border:1px solid #000;
    background-color: #ff0000;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
    background-color:rgba(255,0,0,0.5);
}

但是惊奇的发现,增加后备颜色后,在IE6、7下显示正常,在IE8下却不正常了。

rgba-ie6-fixed-inner-fallback
rgba-ie7-fixed-inner-fallback
rgba-ie8-fixed-inner-fallback

这里需要一个小技巧,需要在样式里增加一条background:transparent,再看IE8效果:

enter image description here

至于为什么background:transparent会有这样的效果,我们后面再探究。

至此我们可以总结下,使元素透明的样式可以这样写:(颜色替换成你需要的)

推荐一个小工具:css 背景颜色属性值转换

.case{
    /*省略无关样式*/
    background-color: #ff0000;
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
    background-color:rgba(255,0,0,0.5);
}

在写上文的过程中,发现需要展开写的地方有很多,比方说:RGBA(R,G,B,A),不仅仅可以用来背景透明,还有其它好多用途。还有filter也值得展开说说,突然觉得transparent好深奥,也得深入下。O(∩_∩)O哈哈~,没关系,慢慢来,后面会把它们一一展开。

那接下来准备谈谈RGBA(R,G,B,A)

`