CSS opacity

CSS opacity

CSS opacity属性用于指定元素的透明度。简而言之,您可以说它指定了图像的清晰度。
用技术术语来说,"opacity"定义为允许光穿过物体的程度。

如何应用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="https://img.mushiming.top/app/bianchenghao6_com/2023-11-14-08e9eaf708384dc8a33908945f1a628a.jpg" alt="normal rose">
<p>Transparent Image</p>
<img class="trans" src="https://img.mushiming.top/app/bianchenghao6_com/2023-11-14-08e9eaf708384dc8a33908945f1a628a.jpg" alt="transparent rose">
</body>
</html>
输出:
普通图像

CSS opacity_https://bianchenghao6.com_【CSS 教程】_第1张

透明图像

CSS opacity_https://bianchenghao6.com_【CSS 教程】_第2张

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