div

时间:2017-09-29 02:19:06

标签: html css opacity

我需要更改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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:2)

你可以这样做:

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

答案 1 :(得分: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;
}

答案 2 :(得分: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>

答案 3 :(得分:0)

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