CSS 修改父div的透明度，但不影响其子HTML元素

在本文中，我们将介绍如何使用CSS修改父div的透明度，同时又不影响其子HTML元素。透明度是CSS中常用的样式属性之一，通过修改透明度可以实现一些特殊的效果，但通常会将透明度应用到整个元素及其子元素上。然而，在某些情况下，我们希望只修改父div的透明度，而保持其子元素的原始透明度。下面将详细介绍如何实现这个效果。

阅读更多：CSS 教程

方法一：使用伪元素添加背景色

一种常见的方法是使用伪元素为父div添加一个背景色。然后，通过调整伪元素的透明度来模拟父div的透明效果。这样，父div的透明度就不会影响到其子元素。

.parent {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5); /* 修改透明度的背景色 */
}

.parent::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 修改透明度的背景色 */
    z-index: -1;
}

在上面的代码中，我们通过伪元素::before为父div添加了一个背景色，使用rgba()函数设置颜色的alpha通道来控制透明度。通过调整background-color属性的alpha通道值来修改透明度。这样，父div和其子元素共享了同一个背景色，但父div的透明度不会影响到子元素。

方法二：使用伪元素覆盖子元素

另一种方法是使用伪元素将父div覆盖住子元素并设置透明度。通过调整伪元素的透明度，实现了只修改父div透明度的效果。

.parent {
    position: relative;
    z-index: 1; /* 确保父div位于子元素之上 */
}

.parent:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 修改透明度的背景色 */
    z-index: -1; /* 将伪元素放置父div下方 */
}