CSS如何只改变父元素背景透明度不改变子元素透明度

当我们想改变父元素的透明度，同时保持子元素的不变，可以使用CSS的opacity属性。但是直接改变父元素的透明度，同时会影响到子元素。因此，需要使用其他方法来实现这个需求。

一种简单的方法是使用rgba颜色来设置背景色。和使用传统的16进制颜色不同，rgba颜色允许我们设置颜色的透明度。具体方法如下：

.parent {
  background-color: rgba(255, 255, 255, 0.5);
}

在这个例子中，我们设置背景色为白色，透明度为0.5。这表示背景色将会是半透明的。其他颜色也可以以此方式设置。

另外一种方法是使用CSS3中的::before和::after伪元素。我们可以在父元素上创建一个伪元素，使用absolute定位和z-index属性将其放置在子元素前面。然后，我们可以在伪元素上设置背景色和透明度，因为它并不含有子元素，所以不会影响到子元素。具体方法如下：

.parent {
  position: relative;
}

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.5);
}

在这个例子中，我们在父元素上创建了一个伪元素::before。然后，我们将其内容设为空，使用绝对定位将其放置在父元素的最上方，并使用z-index属性将其置于子元素下面。最后，我们在伪元素上设置背景色和透明度，来实现只改变父元素背景透明度的效果。

以上是解决只改变父元素背景透明度不改变子元素透明度的两种方法，分别使用rgba颜色和伪元素来实现。根据实际情况选择不同的方法即可。