CSS - 半透明

  • 作者：KK

  • 发表日期：2016.1.30

属性名:opacity

为一个元素设置这个属性的值为一个小数(一般从0.1到0.9取值,2位小数都可以),这样这个元素就是半透明的,例子:

<body>
<div style="width:652px; height:705px; position:absolute; left:0; top:0;">从前有个人叫小明,他终日无所是事,专找小红玩,可是小红不喜欢跟他玩,于是他就死缠烂打,最后得到了小红的芳心!最后相亲相爱,成为了客喻户晓的人物,所以我们从小就知道有小明和小红这两个人.我们也要对喜欢的妹子死缠烂打,才能成为家喻户晓的人</div>
<img width="652" height="705" style="width:652px; height:705px; position:absolute; left:0; top:0; opacity:0.5;" src="http://www.kkh86.com/it/html-base/img/img-demo.jpg">
</body>

上面先使用绝对定位让同样宽高的div和img都定位到相同的地方,这是为了让它们重叠

然后再给img设置半透明属性(透明度为0.5,也是50%的意思),于是图片就半透明,可以看到后面盖住的文字了,你试下将透明度改成0,就是不透明,于是就理所当然地遮盖住下面div的文字了

它不是让图片半透明的意思,是让整个元素变成半透明,包括它里面的所有内容,所以下面再用div的背景色变成半透明来示例一下:

<body>
<div style="width:652px; height:705px; position:absolute; left:0; top:0;">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
<div style="width:652px; height:705px; position:absolute; left:0; top:0; background:red; opacity:0.8;"></div>
</body>

这样第2个div本身是红色背景的,但由于设置了80%的透明度,所以红色不是那么鲜艳了,并且可以看到下面的文字