显示问题的示例：

Question

以下a codepen link说明了我的问题。

我希望能够在一个范围内包含一个div（带有它自己的复杂内容）并降低不透明度，但它不起作用。

有效的解决方案，但我无法使用：

制作span块或内联块（或使用div或其他内容）
将包装div的不透明度值设置为继承

但为什么不用span工作呢？

<!-- unwrapped -->
<div>
  <p>Here is some DOM stuff</p>
</div>

<!-- wrapped but not working -->
<span style="opacity: .5;">
  <div>
    <p>Here is some DOM stuff</p>
  </div>
</span>

<!-- wrapped and working — I don't have luxury to do this, however -->
<span style="display: block; opacity: .3">
  <div>
    <p>Here is some DOM stuff</p>
  </div>
</span>

Answer 1

它实际上工作，而不是像Chrome，Safari和Opera这样的WebKit / Blink浏览器。这是WebKit派生浏览器中一个长期存在的问题。

显示问题的示例：

＆＃13;

.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-no-children {
    display: inline;
    opacity: 0.5;
}
.block-no-children {
    display: block;
    opacity: 0.5;
}
.inline-with-children {
    display: inline;
    opacity: 0.5;
}
.block-with-children {
    display: block;
    opacity: 0.5;
}

＆＃13;

<span class="inline-no-children">inline no children</span>
<hr />
<span class="block-no-children">block no children</span>
<hr />
<span class="inline-with-children">
    inline with children:
    <span class="block">block (fails to become transparent in WebKit/Blink)</span>
    <span class="inline">inline</span>
</span>
<hr />
<span class="block-with-children">
    block with children:
    <span class="block">block</span>
    <span class="inline">inline</span>
</span>

＆＃13;

侧面说明：

虽然不是问题的原因（正如我们在上面看到的那样，标签名称无关紧要），但在内联元素（{{1}）中包装块元素（div标签）在技术上无效}标签）。你真的应该在这里使用像span这样的块显示元素。

Answer 2

内联元素只能包含内联块和内联元素。块元素没有这样的限制。

因此，选项是使所有内部元素内联块/内联或制作跨度块（如第二个示例中所做的那样）或使用块元素而不是跨度，例如格。

包含跨度和降低不透明度的DOM结构不起作用。为什么？

2 个答案:

显示问题的示例：

侧面说明：