Question

在以下示例中，如何将“蓝色”的不透明度设为1？

<!DOCTYPE html>
<html>
<body>

<p>My mother has 
<span style="color:blue;font-weight:bold;opacity:0">
  <span style="color:blue;font-weight:bold;opacity:1">blue</span>
</span> eyes and my father has 
<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.
</p>

</body>
</html>

Answer 1

opacity和display的工作方式不同。应用于父元素时，font-size之类的内容也不会被其子元素继承，除非被自己的样式覆盖。

当父元素具有opacity:0或display:none时，无论其自己的样式是什么，它的所有子元素最终都将变为不可见，因为父元素本身不可见。

现在你要问的是，我要求龙消失但龙的肠子不可见。

但是如果你做<p><h1>something</h1></p>，它会获得h1标签 - 内部标签。这不会发生吗？

没有。任何tag都不会发生这种情况。如果身体是不可见的，那么它的所有元素都是不可见的，只是因为它是不可见的。

Answer 2

opacity继承自父元素。因此，使用rgba颜色代替使用不透明度，其中a是透明度级别。

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p>My mother has <span style="color:rgba(0,0,255,0);font-weight:bold;"><span style="color:rgba(0,0,255,1);font-weight:bold;">blue</span></span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body>
</html>

＆＃13;

Answer 3

对于不透明度，“1”等于100％。因此，要将元素的不透明度降低到36％，那么您可以将不透明度设置为“0.36”。我假设您要做的是设置span元素的不透明度为0.01，那么您可以将style中的不透明度设置为opacity:0.01;

<!DOCTYPE html>
<html>
<body>

<p>My mother has <span style="color:blue;font-weight:bold;opacity:0"><span style="color:blue;font-weight:bold;opacity:0.01;">blue</span></span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body>
</html>

（在不透明度的低点看起来有点困难）

Answer 4

我正在扩展我上面的评论，因为答案并没有真正解决你的问题的症结和评论中的反驳论点。对于父母和孩子来说，你想要做的事情是不可能的，而且至少要求父母中的兄弟姐妹的不透明度不同，父母的不透明度没有变化。

任何具有零不透明度的元素都像隐藏的隐形，隐藏它包含的任何内容，包括文本节点和其他包含的元素。如果您使用<div>尝试此操作，则会得到与使用<span>时相同的结果：即使浏览器识别出其不透明度，也无法看到子元素1，因为它的父元素的外衣有效地屏蔽了它。

在上面评论中的计数器示例中，您会问为什么当您使用段落（<h1>）元素包装标题（<p>）元素时它似乎有效，其形式如下所示：

<p style="opacity: 0;">
  <h1 style="opacity: 1;">blue</h1>
</p>

这是因为当浏览器呈现这些元素时，它会纠正将一个流元素与另一个流元素包装起来的错误。如果您检查DOM中呈现的元素，您将看到它如下所示：

<p style="opacity: 0;"></p>
  <h1 style="opacity: 1;">blue</h1>
<p></p>

这是因为p和h1之类的元素是only permitted to contain phrasing content，如跨度，文本运行等。当您引入流量内容（如标题）时，浏览器会假设您忘记了关闭标题前的段落，然后当它最终到达标题后的结束段落标记时，它会将其超级修正为空段落。

您还可以通过应用类并尝试选择引用父项的子项来验证元素之间的这种关系，如下所示：

<p class="parent">
  <h1 class="child">blue</h1>
</p>

.parent > .child {
  color: blue;
}

你的孩子＆＃34;元素不会呈现为父母的孩子＆＃34;元素，所以风格不会被应用。

所以要重申一下，一个孩子不能覆盖其父级的不透明度，即使它本身具有完全不透明度，因为父级将其屏蔽掉，并且计数器示例不起作用，但只是因为代码为写入在技术上被浏览器破坏并更正，使您想要成为一个孩子而不是兄弟姐妹。

跨度跨度，为什么样式遵循外跨度？

4 个答案: