css透明度总结
2013-12-26 17:02
197 查看
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情。目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效。本文主要通过一些代码来说明如何实用CSS透明度才可以让其兼容你的浏览器。
1.旧版本的opacity设置
以下代码是在FireFox和Safari旧版本中的透明度设置
2.在现代浏览器中的opacity设置
以下代码是除了IE9,IE8,IE7,IE6以外所有当前浏览器(chrome,firefox,opera,safari,IE9+)最为简单的透明度设置
3.在IE9,IE8,IE7,IE6中的opacity设置
设置透明度代码如下
4.使用javascript改变css透明度
你可以使用下面的语法访问JavaScript中的CSS opacity 属性:
直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否要触发haslayout:
$("#myOpacity").css({"opacity":"0.5"}); //所有浏览器有效
当然你也可以使一个元素动画透明:
$("#myOpacity").animate({opacity:0.5},1000,function(){
//回调函数
});
如果以上内容有错漏,欢迎大家指正,我很乐意改正并且和大家进行交流。
1.旧版本的opacity设置
以下代码是在FireFox和Safari旧版本中的透明度设置
#myOpacity{ -khtml-opacity:0.5; -moz-opacity:0.5; }
2.在现代浏览器中的opacity设置
以下代码是除了IE9,IE8,IE7,IE6以外所有当前浏览器(chrome,firefox,opera,safari,IE9+)最为简单的透明度设置
#myOpacity{ opacity:0.5; }上面语法是将一个元素设置为50%的透明度。特别注意,opacity:1 表示将元素设置为不透明,opacity:0 表示将一个元素设置为完全透明。另外,opacity的属性值可以精确到小数点后两位(如,0.56),但是一般情况下只要小数点后以为就足够了,因为我们肉眼很难分辨出这细微的差别。
3.在IE9,IE8,IE7,IE6中的opacity设置
设置透明度代码如下
#myOpacity{ filter:alpha(opacity=50); }注意,在种形式中,opacity值的范围是0-100,数值越低说明越接近透明。
4.使用javascript改变css透明度
你可以使用下面的语法访问JavaScript中的CSS opacity 属性:
document.getElementById("myOpacity").style.opacity="0.5"; //适用于2中所提到的浏览器 document.getElementById("myOpacity").style.filter="alpha(opacity=50)"; //适用于3中所提到的浏览器5.实用jQuery改变css透明度
直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否要触发haslayout:
$("#myOpacity").css({"opacity":"0.5"}); //所有浏览器有效
当然你也可以使一个元素动画透明:
$("#myOpacity").animate({opacity:0.5},1000,function(){
//回调函数
});
如果以上内容有错漏,欢迎大家指正,我很乐意改正并且和大家进行交流。
相关文章推荐
- 【总结】CSS透明度大汇总
- CSS 半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
- css中filter:alpha透明度总结
- 【总结】CSS透明度大汇总
- CSS控制元素背景透明度总结
- 【总结】CSS透明度大汇总
- 【总结】CSS透明度大汇总
- 【总结】CSS透明度大汇总
- CSS总结
- 自己总结的 css div居中的方法
- DIV-CSS兼容性常见前端问题总结
- css总结
- CSS总结------文本字体类
- J2EE 之 css 总结
- CSS的一些零碎总结
- CSS 的优先级机制[总结]
- ASP.NET 2.0中CSS失效的问题总结
- 前端CSS&JS动画总结
- 常用CSS缩写语法总结
- CSS技巧总结(一) 图形效果