给网页中的元素设置透明度 - 文章教程

给网页中的元素设置透明度

发布于 2017-05-22 字数 2738 浏览 1774 评论 0

透明度总是很玄幻,在网页制作中也经常用到,合理的使用透明度能够给我们的网页效果带来鱼一样的视觉体验,当然这其中就有很多复杂的技术,已经更多的浏览器兼容问题。

给网页中的元素设置透明度

一般我们不给元素设置任何样式,那么这个元素的背景和边框就都是透明的,也就是没有设置,显示缺省的属性,浏览器会自动给这些元素的 backgroundborder 属性加上 transparent 属性值。

而有的浏览器在处理这个缺省值的时候略有差异,比如Google浏览器会自动加上 rgba(0, 0, 0, 0),也就是我们所说的Alpha通道为 0,那么就可以理解为 transparent 属性值和 rgba(0, 0, 0, 0) 是基本等价的。

在CSS中设置元素的透明度有两种方法,Alpha通道与Opacity属性。

Alpha通道

Alpha通道就是我们经常使用的 rgba 颜色,在原来的 rgb 上加上一个透明度,而且只针对于可以设置颜色的CSS属性有效,可以单独设置某一个CSS属性。

div {  
    width: 100px;  
    height: 100px;  
    background: rgba(0,0,0,0.5);  
    border: 1px solid #000000;  
}

Opacity透明度

Opacity设置整个元素的透明度,取值从 0-1 并且支持小数。

div {  
    width: 100px;  
    height: 100px;  
    background: #000000;  
    border: 1px solid #000000;  
    opacity: 0.5;  
}

IE的透明度

IE9+才开始支持CSS3 opacity,而对IE6-IE8我们习惯使用 filter 滤镜属性来进行实现。IE4-IE9都支持滤镜写法 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

IE8又引入了特殊的 -ms-filter,IE认为这种写法是对旧写法的一次更正,更符合规范,这个写法的属性值只是多了一对引号,效果同前。不过这种写法的寿命也不长,到IE10对 filter-ms-filter 都已经不再支持。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first  
filter: alpha(opacity=50); // second

如果你要同时使用 filter-ms-filter,请将 -ms-filter 写在 filter 的前面。

注意:测试不要忘了写 DOCTYPE,否则会偏离真实效果。

总结

为了一个透明度我们至少要写4行代码,这个也是为了兼容性,随着浏览器版本的更新,后面我们将得到更加兼容的写法,节省我们的开发时间。

我们发现在利用 alpha 通道设定透明度的时候需要单独对每一个设定,而 opacity 直接就运用在了整个标签上, 其实这就是两者最大的区别,总结来说 opacity 只能设定整个元素的透明值,而 alpha 通道可以特定对元素的某个属性设定透明值,比如上面的背景、 边框、文字等。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论