当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？

当使用 opacity 属性时，它会影响元素及其所有子元素的透明度。要避免子元素继承父元素的透明度，可以使用以下几种方法：

在子元素上设置 opacity: 1: 这是最直接的方法。通过在子元素上显式地设置 opacity 为 1，可以覆盖父元素的透明度设置，使其不透明。
```
<div style="opacity: 0.5;">
    <div style="opacity: 1;">这个子元素不会透明</div>
</div>
```
使用 rgba 或 hsla 为父元素设置背景颜色: opacity 会影响整个元素及其内容。如果您只想让背景透明，可以使用 rgba 或 hsla 颜色值来设置背景颜色，并保持子元素的不透明度。
```
<div style="background-color: rgba(255, 0, 0, 0.5);">
    <div>这个子元素不会透明</div>
</div>
```
在这个例子中，只有父元素的背景是半透明的红色，而子元素的文本保持完全不透明。

将背景颜色应用于伪元素 ::before 或 ::after: 这是一种更灵活的方法，可以创建复杂的背景效果，而不会影响子元素。

<div class="parent">
    <div class="child">这个子元素不会透明</div>
</div>

<style>
.parent {
    position: relative;
}
.parent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
    z-index: -1; /* 将伪元素置于子元素之后 */
}
</style>

这个方法通过在父元素后面创建一个伪元素，并为其设置半透明的背景颜色，实现了类似 opacity 的效果，但不会影响子元素。

创建一个新的图层: 您可以使用新的HTML元素包裹父元素和它的背景，然后将透明度应用于这个新的父元素。
```
<div style="opacity: 0.5;">
    <div>
        <div>这个子元素不会透明</div>
    </div>
</div>
```
这种方法将子元素和背景分离开来，使得只有背景透明，而子元素保持不透明。