CSS 透明度（不透明度）

在学习《 CSS颜色》时，我们已经了解到rgba()和hsla()可以用来设置颜色透明度，但是这些只能让你在定义颜色的同时设置透明度，对于图像等有用，不能设置透明度。

CSS 中提供了 opacity 属性来设置元素的透明度。这不仅适用于颜色，也适用于页面上的图像和其他元素。其语法形式为：

不透明度：数字；

其中，number是一个从0到1的浮点数（十进制数），代表元素的透明度，值越小透明度越高（0是完全透明，1是完全不透明）。

此外，在使用不透明度属性时，请记住以下几点：

如果某个元素定义了 opacity 属性并且其值小于 1，则其子元素也将具有相同的透明度。
如果其他元素是未放置的元素，则该元素的堆叠级别高于其他元素。
如果定义的不透明度属性值超出指定范围，则截取最接近的值。例如，1.5被截取为1。

[示例] 使用 opacity 属性设置元素的透明度。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .img {
            width: 150px;
        }
        .img:last-child {
            opacity: 0.4;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <img src="./css.png" alt="" class="img">
    <img src="./css.png" alt="" class="img">
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_733”对齐=“aligncenter”宽度=“1024”]

图：不透明度属性演示[/caption]

IE8及更早版本的IE浏览器不支持opacity属性，如果想在这些浏览器中实现透明，可以使用filter属性，语法为：

过滤器：alpha（不透明度=数字）；

number的取值范围是0到100，值越小越透明。

[示例]使用filter属性设置元素的透明度：

 <!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: 150px;
        }
        img.image_two {
            filter: alpha(opacity=50);
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <img src="./css.png" class="img_one">
    <img src="./css.png" class="image_two">
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_734”对齐=“aligncenter”宽度=“1024”] 图：滤镜：alpha(opacity=x) 属性演示

图：过滤器：alpha(opacity=x) 属性演示[/caption]

要在所有浏览器中启用透明度，您可以同时定义不透明度和过滤器属性：

p {
不透明度：0.5；
过滤器：alpha（不透明度=50）；
}

通俗易懂地讲解“CSS透明度（opacity）”！您必须观看的最佳 2 个视频

超！初心者のためのCSS講座　要素の透明度を指定する【 opacity 】

https://www.youtube.com/watch?v=nDx_YlVzd7E&pp=ygUjIENTUyDpgI_mmI7luqYgKOS4jemAj-aYjuW6pikmaGw9SkE%3D

透明度を指定する「opacity」とは？hoverと組み合わせて使用する方法【CSSの基礎】

https://www.youtube.com/watch?v=JNOgphYV44A&pp=ygUjIENTUyDpgI_mmI7luqYgKOS4jemAj-aYjuW6pikmaGw9SkE%3D

JSON

在学习《 CSS颜色》时，我们已经了解到rgba()和hsla()可以用来设置颜色透明度，但是这些只能让你在定义颜色的同时设置透明度，对于图像等有用，不能设置透明度。

CSS 中提供了 opacity 属性来设置元素的透明度。这不仅适用于颜色，也适用于页面上的图像和其他元素。其语法形式为：

不透明度：数字；

其中，number是一个从0到1的浮点数（十进制数），代表元素的透明度，值越小透明度越高（0是完全透明，1是完全不透明）。

此外，在使用不透明度属性时，请记住以下几点：

如果某个元素定义了 opacity 属性并且其值小于 1，则其子元素也将具有相同的透明度。
如果其他元素是未放置的元素，则该元素的堆叠级别高于其他元素。
如果定义的不透明度属性值超出指定范围，则截取最接近的值。例如，1.5被截取为1。

[示例] 使用 opacity 属性设置元素的透明度。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .img {
            width: 150px;
        }
        .img:last-child {
            opacity: 0.4;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <img src="./css.png" alt="" class="img">
    <img src="./css.png" alt="" class="img">
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_733”对齐=“aligncenter”宽度=“1024”]

图：不透明度属性演示[/caption]

IE8及更早版本的IE浏览器不支持opacity属性，如果想在这些浏览器中实现透明，可以使用filter属性，语法为：

过滤器：alpha（不透明度=数字）；

number的取值范围是0到100，值越小越透明。

[示例]使用filter属性设置元素的透明度：

 <!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: 150px;
        }
        img.image_two {
            filter: alpha(opacity=50);
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <img src="./css.png" class="img_one">
    <img src="./css.png" class="image_two">
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_734”对齐=“aligncenter”宽度=“1024”] 图：滤镜：alpha(opacity=x) 属性演示

图：过滤器：alpha(opacity=x) 属性演示[/caption]

要在所有浏览器中启用透明度，您可以同时定义不透明度和过滤器属性：

p {
不透明度：0.5；
过滤器：alpha（不透明度=50）；
}