Question

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

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以这样做：

.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 2

如果.half-faded有多个元素（不只是span s），您可以这样做：

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

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

<强> [编辑]

在评论中执行操作的唯一方法是将“实体”文本换行到<span>中，例如下面的代码段中所示。原因是.half-faded > .solid规则将.solid元素的不透明度变回1，因此我们必须将.biz元素之外的文本的不透明度调低回{{ 1}}，但是没有CSS规则来匹配文本节点，因此你需要在一个元素中包含文本。

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

0.3

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

Answer 3

请参阅我的评论。

黑色背景表明它是透视。

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 4

opacity属性只能接受0到1之间的数字，因此opacity: 2无效。问题是您正在尝试更改子元素的opacity（它已经有opacity: 1）。 {@ 1}}子元素的增加不会解决问题，您需要更改opacity元素的opacity属性。

div

4 个答案: