div 中的不同不透明度元素

Question

我需要更改 div 中某个元素的不透明度，使其比父元素的不透明度更高。如何在没有预处理器的情况下为 .solid 提供完全不透明度 (="1")？

.half-faded {
  opacity:0.3;
  border:1px solid black;
  width:200px;
  display:flex;
  justify-content:space-around;
}
.solid {
  opacity:1; /* doesn't help */
  opacity:2; /* twice doesn't help */
}

<div class="half-faded">
  <span class="one">One</span>
  <span class="two">Two</span>
  <span class="solid">Solid</span>
  <span class="four">Four</span>
</div>

Answer 1

请看我的评论

黑色背景是为了表示它是透明的。

body{
background-color:black;
}

.half-faded {
  background-color:rgba(255,255,255,0.3);
  border:1px solid black;
  width:200px;
  display:flex;
  justify-content:space-around;
}

.half-faded span{
opacity:0.3;
}
.solid {
  opacity:1 !important;
}

<div class="half-faded">
  <span class="one">One</span>
  <span class="two">Two</span>
  <span class="solid">Solid</span>
  <span class="four">Four</span>
</div>

Answer 2

opacity属性只能接受0到1之间的数字，所以opacity: 2无效。问题是您正在尝试更改子元素的 opacity（它已经有 opacity: 1）。增加子元素opacity不能解决问题，你需要改变.half-faded元素的opacity属性。

Answer 3

你可以这样做：

.half-faded {
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 200px;
  display: flex;
  justify-content: space-around;
}

.half-faded * {
  opacity: 0.3;
}

.half-faded .solid {
  opacity: 1;
}

<div class="half-faded">
  <span class="one">One</span>
  <span class="two">Two</span>
  <span class="solid">Solid</span>
  <span class="four">Four</span>
  <div>other</div>
</div>

Answer 4

如果 .half-faded 有多个元素（不仅仅是 spans），你可以这样做：

.half-faded > * {
  opacity: .3;
}

.half-faded > .solid {
  opacity: 1;
}

[编辑]

完成您在评论中要求的唯一方法是将 "Solid" 文本包装在 <span> 中，例如，如下面的代码片段所示。原因是 .half-faded > .solid 规则将 .solid 元素的不透明度调回 1，因此我们必须将 .biz 元素之外的文本的不透明度调回 0.3，但是没有 CSS 匹配文本节点的规则，因此您需要在元素中包含文本。

如果您能够更改标记的构建方式，我认为更改标记的构建方式会更容易。

.half-faded > * {
  opacity: .3;
  display: block;
}

.half-faded > .solid {
  opacity: 1;
}

.half-faded > .solid > span {
  opacity: .3;
}

<div class="half-faded">
  <div>Not solid</div>
  <a class="solid">Solid</a>
  <span class="solid">
    <span>Inside solid but not solid</span>
    <a href="#" class="biz">Solid business</a>  
  </span>
</div>

div 中的不同不透明度元素

Different opacity element within a div

html

css

opacity