如何使search_artist的子元素置于父元素上方，不受透明度影响

嘿，我来帮你搞定这个困扰！首先得弄明白为啥会出现这个情况：当你给父元素.search_artist设置opacity时，这个透明度会作用于整个父元素容器及其所有子元素——这是CSS的固有特性，哪怕你给子元素单独设置opacity: 1也没用，因为它们是在父元素的透明“画布”上渲染的。

下面给你两种最实用的解决方案，按需选择：

方案一：用rgba背景色替代opacity（优先推荐） #

如果你的需求只是让父元素的背景半透明，而子元素要保持完全不透明，那直接把父元素的opacity换成背景色的rgba值就好，这是最简洁的方法：

原来的SCSS可能是这样：

.search_artist {
  opacity: 0.6;
  background-color: #333;
  /* 其他样式 */
}

改成：

.search_artist {
  background-color: rgba(51, 51, 51, 0.6); /* 最后一个数值是透明度，和opacity:0.6效果一致 */
  /* 去掉原来的opacity属性 */
  /* 其他样式保留 */
}

这样父元素的背景是半透明的，但所有子元素会完全继承自身的颜色，不会被透明度影响。

方案二：绝对定位脱离父元素透明上下文 #

如果父元素需要整体透明（包括边框、内部非子元素的内容等），那可以把需要不受影响的子元素从父元素中移出，用绝对定位放在父元素上方：

调整HTML结构 #

<!-- 父元素保留需要透明的内容 -->
<div class="search_artist">
  <!-- 比如背景装饰、需要透明的提示文字等 -->
</div>
<!-- 把要保持不透明的子元素移到外面 -->
<div class="search_artist__foreground">
  <!-- 你的搜索框、按钮、文字等内容 -->
  <input type="text" placeholder="搜索艺术家">
  <button>搜索</button>
</div>

对应的SCSS设置 #

.search_artist {
  position: relative; /* 给子元素定位做参照 */
  opacity: 0.6;
  width: 400px;
  height: 150px;
  /* 父元素的其他布局样式 */
}

.search_artist__foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 子元素的样式，完全不受父元素opacity影响 */
  input {
    padding: 8px;
    border: none;
    background: #fff;
    color: #333;
  }
}

这样子元素就脱离了父元素的透明渲染上下文，独立显示在父元素上方，完全不会被父元素的opacity影响。

总结一下：优先用方案一，除非你真的需要父元素整体透明，再用方案二。

内容的提问来源于stack exchange，提问作者Strahinja Ajvaz