怎么使用css控制元素的透明度

 剑鱼论坛 发表于 2019年12月14日 CSS/CSS3  145
剑鱼论坛
LV 8 研究生
最后在线:2年前
加入时间:5年前
主帖:143  跟帖:100

CSS中有一个属性可以控制页面元素的透明度,这个属性是“Opacity”,我们只需要对这个属性赋值就可以完成透明度的设置。属性使用也很简单,如下代码:

opacity:0.5

上面这个代码就是把当前元素的透明度设置为半透明,您可以修改冒号后面的数字,使其透明度满足您的需要。这个数字是0到1之间的数字,表示不同程度的透明度,0表示完全透明,1表示完全不透明。

opacity属性可以应用在页面元素上,包括图片,div等,下面用一个例子来说明:

<div style="background-color: black; padding:10px;"></div>

上面这个div里面,我们用“background-color: black”对div设置了背景色为黑色,这是为了能够看到效果。然后我们在上面代码的基础上添加透明度设置,代码如下:

<div style="background-color: black; padding:10px; opacity:0.5"></div>

我们增加了“opacity:0.5”,这时您会发现div原来的纯黑色已经变化了,当我们调整opacity属性的数值时,div的透明度会随着调整而调整。

额外的如果您的代码希望兼容IE8以及更早的IE浏览器的话,那么您还需要添加如下的代码:

filter:alpha(opacity=40)

但是随着浏览器的发展,现在使用IE8浏览页面的网友已经基本没有了,所以在普遍的情况下,您可以大胆地只使用“opacity”属性设置透明度。

论坛主帖
288
论坛跟帖
316
在线访客
0
今日主帖
0
今日跟帖
0
今日注册
0
36
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2024 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0
剑鱼论坛