CSS opacity属性

CSS opacity属性用于设置元素的不透明度（透明度）。一个完全不透明的元素的不透明度为1，一个完全透明的元素的不透明度为0。opacity属性可以取0到1之间的任何值，包括小数（例如0.5表示50％不透明度）。

语法

opacity: value;

示例

例如，可以使用以下代码来使图像半透明：

img {
  opacity: 0.5;
}

如果我们希望仅当鼠标移到图像上时才应用半透明效果，则可以使用:hover伪类：

img:hover {
  opacity: 0.5;
}

注意：任何应用于元素的CSS属性都将影响元素本身以及其后代元素。如果将不透明度应用于包含其他元素的元素，则该元素及其所有后代元素（除非另有规定）都将有相同的不透明度。

实例

这里我们创建一个简单的HTML页面，并使用CSS opacity属性来使文本和背景图像部分透明：

<!DOCTYPE html>
<html>
<head>
    <title>CSS opacity Property</title>
    <style>
        body {
            background-image: url('https://images.unsplash.com/photo-1634349989835-107394bc3be8');
            background-size: cover;
            background-position: center;
        }

        h1 {
            font-size: 4rem;
            color: #fff;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
            margin: 0;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            opacity: 0.8;
            margin-top: 100px;
        }

        p {
            color: #fff;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <h1>CSS opacity属性</h1>
    <p>opacity属性用于设置元素的不透明度（透明度）。一个完全不透明的元素的不透明度为1，一个完全透明的元素的不透明度为0。opacity属性可以取0到1之间的任何值，包括小数（例如0.5表示50％不透明度）。</p>
</body>
</html>

在这个示例中，我们设置了一个背景图片，并将标题和段落部分透明，以便让背景图片透过来，创造出非常酷的效果。