【总结】CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情。目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效。
这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。
关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。
1. 旧的Opacity设置
以下代码是Firefox和Safari旧版本所需的透明度设置:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->#myElement {
- -khtml-opacity: .5;
- -moz-opacity: 0.5;
- }
-khtml-opacity设置是针对旧版本的Webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容Safari 1.x.的用户。
第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本,以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性,Firefox 3.5(现在使用Gecko引擎)已经不在支持这个属性。
2. 在Firefox, Safari, Chrome和Opera下的CSS透明度
以下代码是除了IE外的所有当前浏览器的最简单,最最新的不透明度设置的CSS语法:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->#myElement {
- opacity: .7;
- }
上述语法将设置一个元素为70%不透明(或30%透明)。设置opacity:1将使元素不透明,而设置opacity:0将使得元素完全不可见。你 只要记住“opacity”等同于“不透明”就很容易记住了,opacity值越小就越接近透明。
opacity属性可以精确地小数点后两位,所以值取“.01”和“.02”实际上是不同的,虽然可见度很难被发觉。一般情况下,精确到一位就可以了,取值如“.3”或“.7”。
3. IE下的CSS透明度
IE下照旧有别于其他浏览器,并且目前也有三个不同版本的IE在广泛使用,透明度设置是不同的,有时需要额外的CSS来控制:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->#myElement {
- filter: alpha(opacity=40);
- }
上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意:为了使得透明设置生效,元素必须是“有布局”。一个元素可以通过使用一些CSS属性来使其被布局,有如width 和 position。关于微软专有的hasLayout属性详情,以及如何触发它,参考这里。
另外一个设置IE8的CSS透明度的方法语法如下(注意注释中指出的版本):
第一行代码针对当前所有IE版本,第二行仅针对IE8。
注意两行代码的不同之处:在第二行代码中,在filter属性前跟着-ms-前缀,并且属性值有加引号,这些都是语法所必须的。
说实在,有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后,我也不确定是否还有必要用“progid”的方法。
4. 使用JavaScript设置和改变CSS透明度
您可以使用下面的语法访问JavaScript中的CSS opacity 属性:
上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然,你必须先通过特征检测来决定使用哪一行代码。
5. 使用JQuery设置和改变CSS透明度
直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否“haslayout”:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->$("#myElement").css({ opacity: .4 });
- // 所有浏览器有效
您也可以使用一下jQuery代码使一个元素动画透明:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->$("#myElement").animate({
- opacity: .4
- }, 1000, function() {
- // 动画完成,所有浏览器下有效
- });
不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。
如果该元素的透明度在CSS中已经设定为“.4”,那在动画运行的时候,你将不会发觉有任何不同,所以动画开始和最终透明度要有所不同。
6. 通过 RGBA的透明度
另一个CSS3技术只支持部分新的浏览器(Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+),可通过RGBA的alpha通道的方式设定。语法如下:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->#rgba {
- background: rgba(98, 135, 167, .4);
- }
在上面的定义中,通过RGB(前三个数字)给背景设定颜色,然后最后一个是alpha设置,以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样,可设定任何0到1的数字,精确得到两位小数点。数字值越大,就越接近完全不透明的颜色。
7. 通过 HSLA的透明度
类似之前的定义,CSS3还允许使用HSLA单独设置颜色和alpha值,HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。以下是HSLA透明的例子:
- <!--
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- -->#hsla {
- background: hsla(207, 38%, 47%, .4);
- }
更多关于HSLA颜色的解释,参考这篇来自W3.org的文章。如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度,仅此而已。
我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏,欢迎随时评论指出,我将乐意作更正或补充。谢谢~
【总结】CSS透明度大汇总的更多相关文章
- CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
- CSS选择器大汇总
CSS选择器是学习CSS以及Web编程的基础. 整理出常用的CSS选择器,供自己和大家一起学习. 基本选择器 * /*通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)*/ #id /*id ...
- android app性能优化大汇总(内存性能优化)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上 ...
- ANDROID内存优化——大汇总(转)
原文作者博客:转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! ANDROID内存优化(大汇总——上) 写在最前: 本文的思路主要借鉴了20 ...
- C#源码大汇总
C#高仿QQ2013可在广域网部署聊天系统GG叽叽 动态显示硬盘分区容量饼图 自定义ProgressBar控件高仿Win8进度条 多皮肤精美在线QQ悬浮客服插件 jQuery仿天猫首页多格焦点图片轮播 ...
- ANDROID内存优化(大汇总——中)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上 ...
- IE6 浏览器常见兼容问题 大汇总(23个)
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
- 总结HTML5的学习方法大汇总
html5学习方法之技能清单: 必须掌握基本的Web前端开收技术,其中包括:CSS.HTML.DOM.java.Ajax,jquery,Vue,jquery- mobile,zepto等,在掌握这些技 ...
- IE6 浏览器常见兼容问题 大汇总(23个)[转载]
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
随机推荐
- js 算法
var str=‘abscdf’; function solution(str){ var arr=new Array(); if(str.length%2==0){ for(i=0;i<str ...
- vue 中ref 的使用注意事项
最近看别人的项目发现有些语法不能理解,所以百度进行了学习.现在总结一下. ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上 ...
- jsp页面has already been called for this response错误解决方法。
创建验证码的jsp页面提示错误:has already been called for this response <%@ page contentType="image/jpeg&q ...
- mysqldumpslow 分析slow query日志和explain分析mysql查询结构
mysqldumpslow的使用:比如我们要查询按时间返回前5条日志信息,格式如下:mysqldumpslow -s t -t 5 /var/log/mysql/slowquery_20180303. ...
- Oracle 数据库备份启用压缩以及remap
1. Oracle数据库进行备份恢复 客户测试环境, 有时候需要从现场copy到公司, 压缩虽然能够减少部分空间大小,但是copy到虚拟机里面也时浪费很大量的磁盘,所以能够在备份恢复的过程中执行压缩最 ...
- 【Linux笔记】ldconfig、ldd
一.ldconfig ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig. ldconfig 命令的用途,主要是在默认搜寻目录(/ ...
- 用java和junit编写app自动化测试用例
package myTest; import static org.junit.Assert.*; import io.appium.java_client.android.AndroidDriver ...
- IBatisNet 缓存使用
参考:http://www.cnblogs.com/xiaogangqq123/archive/2011/06/30/2094905.html <?xml version="1.0&q ...
- MT【145】不变的平面角
(2018,4月学考数学选择最后一题)如图,设矩形$ABCD$所在平面与梯形$ACEF$所在平面相交于$AC$. 若$AB=1,BC=\sqrt{3},AF=EF=EC=1,$则下面二面角的平面角为定 ...
- 【BZOJ2654】Tree(凸优化,最小生成树)
[BZOJ2654]Tree(凸优化,最小生成树) 题面 BZOJ 洛谷 题解 这道题目是之前\(Apio\)的时候写的,忽然发现自己忘记发博客了... 这个万一就是一个凸优化, 给所有白边二分一个额 ...