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

在前端开发中，当你为一个元素设置 opacity 属性时，确实会影响到该元素的所有子元素，使它们也变得透明。如果你想要让父元素透明，但保持子元素不透明，有几种方法可以实现：

1. 使用RGBA颜色：
   而不是使用 opacity，你可以为父元素设置背景颜色时使用 RGBA 颜色值。RGBA 允许你指定颜色的红、绿、蓝和透明度（Alpha）值。这样，只有父元素的背景会变得透明，而子元素会保持其原有的不透明度。

   .parent {
       background-color: rgba(255, 255, 255, 0.5); /* 白色背景，50% 透明度 */
   }
   .child {
       background-color: rgb(0, 0, 0); /* 黑色背景，完全不透明 */
   }
   

2. 使用伪元素：
   你可以使用 ::before 或 ::after 伪元素来创建一个与父元素相同大小的透明层，然后将子元素放置在这个透明层之上。这样，父元素的“实际”内容（即子元素）将不会受到透明度的影响。

   .parent {
       position: relative;
   }
   .parent::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(255, 255, 255, 0.5); /* 透明背景 */
       z-index: -1; /* 确保伪元素位于子元素之下 */
   }
   .child {
       position: relative; /* 子元素相对于父元素定位 */
   }
   

3. 使用背景图像与透明度：
   如果父元素的背景是一个图像，并且你希望图像透明而内容不透明，可以使用 CSS 的 background-size、background-position 和 background 属性与一张具有透明度的图像。这样，只有背景图像会透明。

4. SVG方法：
   如果你的布局允许，使用SVG（可缩放矢量图形）也是一个不错的选择。在SVG中，你可以单独控制每个元素的透明度，而不会影响到其子元素。

选择哪种方法取决于你的具体需求和布局复杂性。通常，使用RGBA颜色是最简单且最直接的方法。如果需要更复杂的布局或效果，伪元素或SVG可能更合适。