这个问题在这里已有答案:
在下面的示例中,如何将“蓝色”的不透明度设为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>
opacity
继承自父元素。所以不使用不透明度使用rgba
颜色,其中a
是透明度的水平。
<!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>
不透明度“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>
(在不透明度的低点看起来有点困难)
我正在扩展我上面的评论,因为答案并没有真正解决你的问题的症结和评论中的反驳论点。对于父母和孩子,您想要做的事情是不可能的,而且至少要求父母中的兄弟姐妹在不透明度方面有所不同,而父母的不透明度没有变化。
任何具有零不透明度的元素都像隐藏的隐形,隐藏它包含的任何内容,包括文本节点和其他包含的元素。如果你用<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;
}
您的“child”元素不会呈现为“parent”元素的子元素,因此不会应用该样式。
所以重申一下,一个孩子不能覆盖其父级的不透明度,即使它本身具有完全不透明性,因为父级将其屏蔽掉,并且计数器示例不起作用,但只是看起来有效,因为所写的代码是技术上的由浏览器打破并更正,将您想要成为孩子的内容改为兄弟姐妹。
opacity
和display
的工作方式不同。应用于父元素时,没有像font-size
这样的东西也会被其子元素继承,除非被它们自己的样式覆盖。
当一个父元素有opacity:0
或display:none
时,它的所有子元素最终会变成不可见的,无论它们自己的样式是什么,因为父元素本身是不可见的。
现在你问的是,我要求龙消失但龙的肠子不可见。
但是如果你做
<p><h1>something</h1></p>
,它会获得h1标签 - 内部标签。这不会发生吗?
不会。任何tag
都不会发生这种情况。如果身体是不可见的,那么它的所有元素都是不可见的,只是因为它是不可见的。