CSS的" opacity"属性可用于设置HTML元素的不透明度/透明度。不透明度与透明度相反，因此HTML元素越不透明，透明度就越低。

不透明度指定为介于0和1之间的数字。值0表示完全透明(无不透明度)，值1表示完全不透明。类似地，值" 0.5"表示半透明，与半透明相同。

这是一个opacityCSS属性示例：

.withOpacity {
    opacity: 0.5;
}

此示例将CSS类" withOpacity"的所有HTML元素的不透明度设置为" 0.5"，这意味着HTML元素变为半透明。

这是带有背景图像的div元素的可视示例，其中包含带有红色背景和一些白色文本的另一个div元素。内部的div元素的不透明度设置为0.7：

这个div元素是半透明的。

注意，如何通过内部div元素的红色背景和白色文本看到外部div元素的背景图像。

用于生成上述CSS不透明度示例的代码为：

<div style="background-image: url('/images/css/border-image.png'); 
            background-size: 100% 100%; height: 200px;">
    <div style="opacity: 0.7; font-size: 3.0em; 
                background-color: #ff0000; color: #ffffff;">
        This <code>div</code> element is semi-transparent.
    </div>
</div>

嵌套元素的不透明度

如果设置HTML元素的不透明度并且该元素具有子元素(嵌套元素)，则嵌套元素可以具有的最大不透明度与父元素相同。例如，如果在外部元素(父元素)上将不透明度设置为0.7，则所有子元素的最大不透明度可以为0.7.

有一些方法可以解决此问题。例如，我们可以将父元素的背景色设置为具有透明性的颜色(请参阅CSS颜色)。这样，只有父级的背景颜色才是透明的。所有嵌套元素将完全不透明。

我们还可以使用CSS position属性将不透明元素放在半透明元素的顶部。因此，不透明元素在技术上不是半透明元素的子元素，但看起来像是半透明元素。