HTML 如何在不影响子元素的情况下应用透明度（opacity）的方法

在本文中，我们将介绍如何使用HTML和CSS来应用元素的透明度（opacity），同时不影响其子元素的显示。

阅读更多：HTML 教程

什么是透明度（opacity）？

透明度是指一个元素的不透明程度，取值范围为0到1，其中0表示完全透明，1表示完全不透明。当一个元素具有透明度时，它的背景和内容都会受到影响。

影响子元素的透明度

默认情况下，一个元素的透明度设置会同时影响其所有子元素。例如，如果一个父元素的透明度设置为0.5，那么其中的所有子元素也都会具有相同的透明度。

<div class="parent">
    <p>This is a child element.</p>
</div>

<style>
.parent {
    opacity: 0.5;
}
</style>

在上述示例中，无论是父元素还是子元素，都会显示为半透明状态。

如何仅对元素本身应用透明度？

如果我们希望仅对一个元素本身应用透明度，而不影响其子元素，可以使用CSS中的rgba()函数来设置背景色，同时设置透明度。

<div class="parent">
    <p>This is a child element.</p>
</div>

<style>
.parent {
    background-color: rgba(255, 255, 255, 0.5);
}
</style>

在上述示例中，父元素的背景色被设置为半透明的白色，而子元素保持完全不透明。

如何应用不透明度而不影响子元素？

除了使用rgba()函数外，还可以使用绝对定位（position: absolute）和伪元素（pseudo-element）来实现父元素的不透明度，而不影响子元素。

<div class="parent">
    <p>This is a child element.</p>
</div>

<style>
.parent {
    position: relative;
}

.parent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}
</style>