我需要更改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;
答案 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
属性。