CSS3.0一步一步应用系列之三:透明度Opacity

题外话:春节过去了,新年新气象,看看书学学习,写写东西,早日进入正常的工作状态。今年太多的期望需要付诸努力去实现。加油!

转入正题啦~~~~~

CSS opacity这些年已经成为一种技术的趋势,让opacity在跨浏览器中兼容,也困扰着开发人员。今天这篇文章关于CSSopacity 的详细讲解,并提供了代码示例和解释来帮助大家更好在跨浏览器中应用opacity。

Opacity的基本语法

语法:<length> | inherit

取值:<length>:由浮点数字和单位标识符组成的长度值。不可为负值。默认值为:1

inherit:默认继承。

说明:由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。

兼容性:

(×)IE6

(√)Firefox 3.0.10

(√)Chrome 2.0.x

(√)Opera 9.64

(√)Safari 4

(×)IE7

(√)Firefox 3.5

(×)IE8

例子:

.opacity1{opacity:0.3;}

<img class=”opacity”src=”…” />

Opacity的详细解说

早前的opacity 设定

#myElement{ -khtml-opacity: .5;-moz-opacity: .5}

-khtml-opacity的设定是为了以webkit为内核的浏览器,在旧版本的safari中同样起作用。

-moz-opacity致于mozilla的早期版本。自从Firefox 0.9版本后,Firefox已经不再用-moz-opacity 。Firefox 3.5 现在已经用Gecko的内核,已经不支持这个属性了。

CSS Opacity in Firefox, Safari, Chrome, and Opera

#myElement{ opacity: .7;}

CSS Opacity in Intelnet Explore

#myElement{filter:alpha(opacity=40);}

这段代码在IE 6-8中都是通用的。但对IE6-7有个告诫:为了让应用有效,这个元素需要 “havelayout”。一个元素能够通过一列写的CSS属性获得layout,其中包括 width,positon.具体的在微软的hasLayout属性中有详细的讲解。此处详情可参考此文:http://reference.sitepoint.com/css/haslayout。

当然对于IE8还有别的方法

#myElement {
filter:progid:DXImageTransform.Microsoft.Alpha(opac ity=40);
针对IE6-8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
这对IE8
}

升级版的写法:

#myElement{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: alpha(opacity=40);}
}

基本上来说,如果页面中含有 IE8-as-IE7 meta tag, 或者你担心IE8的用户点击compatibilitymode button , -ms-filter 这个就是必须的了。其他的,filter属性就可以搞定了~

关于IE8-as-IE7 meta tag这个简单讲解一下:

让IE8的页面IE7一样~增加一个meta代码

<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

对 Compatibility mode button不了解的可以查阅:http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx

综上所述,兼容所有版本浏览器的Opacity设定为:

#myElement{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity:0.3;
opacity:0.3;
}

对于CSS opacity的研究,让我们走的更深一些吧!

通过JS改变Opacity

document.getElementByIdx_x_x(“myElement”).style.opacity=”.4”;//对大多数浏览器
document.getElementByIdx_x_x(“myElement”).style.filter=”alpha(opacity=40)”;//对IE浏览器

通过jQuery改变Opacity

$(“#myElement”).css({opacity:.4});

到此,对CSS opacity的探讨告一段落,有兴趣的朋友可以继往开来~~

此文参考了:

http://www.zhangxinxu.com/css3/css3-opacity.php

http://www.impressivewebs.com/css-opacity-reference/

http://reference.sitepoint.com/css/haslayout

  

爱华网本文地址 » http://www.aihuau.com/a/25101015/245892.html

更多阅读

养生保健系列之(三)-挠头和摇头晃脑的好处 养生保健酒

养生保健系列之(三) - 挠头和摇头晃脑的好处在江泽民主政的年代, 常常在电视新闻里看到其即使在会见外宾时, 也拿着梳子由前向后梳头. 这其实是一种保健的方法. 足少阳胆经和足太阳膀胱经在头上由前向后、向侧循行. 向后梳头可疏通

系列之二:施食、各式烟供、火供火施 、施食咒火供施食咒求

系列之二:施食、各式烟供、火供(火施)、施食咒火供(施食咒求财法)参考系列之一:果滨居士念诵的所有相关咒语下载(包含教学mp3、直诵mp3、讲义档)系列之三:该不该施食?施食有何利益?末学施食从开始到现在都在自己家中四楼阳台操作,所以将自身的

贾如棋亲历《我们约会吧》之三:淑霞深情一拥与炜哥的眼泪

贾如棋亲历《我们约会吧》之三:淑霞深情一拥与炜哥的眼泪2010年12月1号出场的4号女嘉宾李淑霞个子不高,穿一袭斜跨露肩黑裙,披一头汉式长发,给人的感觉是身上有一种成熟高雅的气质,婀娜有型,绝对的女人味。这是我对她出场的第一印象。小

恶搞营销系列之三:恶搞对手

   竞争不是温良恭谦让  为人处事和为贵,生意往来和气生财。  中国人一直主张与人为善,睦邻友好,对一团和气这种人际关系处理方式十分偏爱,这也是中国人最基本的人际关系哲学。  但市场遵循的却是丛林法则——弱肉强食,没有和气

声明:《CSS3.0一步一步应用系列之三:透明度Opacity》为网友够久就走分享!如侵犯到您的合法权益请联系我们删除