本文概述
- 如何应用CSS不透明度设置
- CSS不透明度示例:透明图像
用技术术语来说, “不透明度”定义为允许光穿过物体的程度。
如何应用CSS不透明度设置 不透明度设置均匀地应用于整个对象, 并且不透明度值是用小于1的数字值定义的。不透明度值越小表示不透明度越高。不透明度不被继承。
CSS不透明度示例:透明图像 让我们看一个简单的CSS不透明度示例, 即图像透明度。
<
!DOCTYPE html>
<
html>
<
head>
<
style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
<
/style>
<
/head>
<
body>
<
p>
Normal Image<
/p>
<
img src="http://www.srcmini.com/rose.jpg" alt="normal rose">
<
p>
Transparent Image<
/p>
<
img class="trans" src="http://www.srcmini.com/rose.jpg" alt="transparent rose">
<
/body>
<
/html>
输出:
普通影像

文章图片
透明图像

文章图片
注意1:Chrome, Firefox, Opera, Safari和IE9使用opacity属性提高透明度。不透明度值的范围是0.1到1.0。较低的值会产生较大的不透明度。 注意2:较旧版本的IE使用过滤器:alpha(opacity = x)。 x值在0到100之间变化。较低的值会产生较大的不透明度。