透明度和背景透明---opacity&transparent-白红宇

透明度和背景透明---opacity&transparent

阅读量：6157 次

发布时间：2019-06-21

本文共 1121 字，大约阅读时间需要 3 分钟。

1、透明度

opacity: 0.3;

filter:alpha(opacity=30);

opacity设置透明度，后代元素会继承当前元素的透明度。

效果如下图：

<!DOCTYPE html> <html> <head> <title>透明度---opacity---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { width: 500px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; opacity: 0.3; filter:alpha(opacity=30); background: red; } </style> </head> <body> <div class="test"> 测试。。。 </div> </body> </html>

运行代码

2、背景透明

background-color: rgba(255,0,0,0.3);

前三个参数代表rgb数值，最后一个参数代表透明度

background: transparent;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#50ff0000,endColorstr=#50ff0000);

zoom: 1;

50ff0000：前两位代表透明度，后面六位分表代表rgb的数值。

效果如下图：

<!DOCTYPE html> <html> <head> <title>背景明度---transparent---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { width: 500px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; background: transparent; background-color: rgba(255,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#50ff0000,endColorstr=#50ff0000); zoom: 1; } </style> </head> <body> <div class="test"> 测试。。。 </div> </body> </html>

运行代码

你可能感兴趣的文章