div中的不同不透明度元素答案

【问题标题】：Different opacity element within a divdiv中的不同不透明度元素
【发布时间】：2018-03-10 21:17:51
【问题描述】：

我需要更改 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>

【问题讨论】：

你没有。您应该使元素本身具有不透明度并按项目进行更改。如果您希望背景清晰，请使用RGBA 或HSVA
当你改变一个容器的不透明度时，你改变的是整个容器，包括孩子。半透明容器的用途是什么？如果它只是为了半透明的外观，那么按照@Jhecht 的建议进行操作。否则，如果您有这样做的具体原因，请告诉我们。
如果父级的不透明度为 0.3，则子级“似乎”拥有的最大不透明度为 0.3。我用引号写“似乎”，因为实际上孩子的不透明度为 1（即默认值），这就是为什么将它设置为 1（或 2，这是一个无效值），正如你所尝试的那样，没有用。跨度>
你们，我加入opacity:2; 只是为了双关语:)）感谢您的回答。问题是我在该父 div 中有imgs、spans、divs 等在 divs 内，我必须单选一个项目并更改其不透明度。更改单个元素的不透明度对于 UI 和后端来说都是一场噩梦，我希望能够快速解决。感谢您指出没有:)

标签： html css opacity

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

[编辑]

执行您在评论中要求的唯一方法是将“Solid”文本包含在 <span> 中，例如，如下面的 sn-p 所示。原因是.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>

【讨论】：

巧妙。起立鼓掌。

【解决方案3】：

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

【讨论】：

【解决方案4】：

请看我的评论。

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

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>

【讨论】：

很好的例子，但也许黑色以外的颜色会更清楚地显示它？有点难看，那里:)
为什么需要背景色？如果我只删除两个background-color 行怎么办？
.half-faded 是为了让元素的背景透明。黑色背景是为了显示半褪色的不透明度以及实体元素的未褪色不透明度。