为啥在将html元素的不透明度更改为0.5后，我不能将h1元素的不透明度改回1？ [复制]
Posted
技术标签:
【中文标题】为啥在将html元素的不透明度更改为0.5后，我不能将h1元素的不透明度改回1？ [复制]【英文标题】：Why can't I change the opacity of h1 element back to 1 after changing opacity of html element to 0.5? [duplicate]为什么在将html元素的不透明度更改为0.5后，我不能将h1元素的不透明度改回1？ [复制] 【发布时间】：2016-12-06 07:10:45 【问题描述】：我在 css 中为我的 html 元素添加了一个背景图像，以便它随着网络浏览器的大小而扩展。我将此 html 元素中的不透明度更改为 0.5。我想将子元素（特别是 h1 和段落元素）改回不透明度为 1，因此文本不透明。它不起作用。请帮忙:)
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<p id ="topBar"></p>
<h1>Heading</h1>
<h3>Name</h3>
<p>
Paragraph
</p>
<h3>Heading</h3>
<p>More text</p>
<h3>Send us an email!</h3>
<form>
<input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
<textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
<input type="submit" value ="Send" name="send">
</form>
<p id ="bottomBar"></p>
</body>
</html>
CSS：
html
background: url(pen.jpg) no-repeat center fixed;
background-size: cover;
font-family: Garamond;
text-align: center;
opacity: 0.5;
h1
opacity: 1;
【问题讨论】：
@LaurIvan 不。 h1 规则比 html 规则更具体，因此适用。 整个 html 文档都有一个 opacity 指令，它会影响所有内容，而不管具体性或优先级。 @LaurIvan 添加 !important 什么都不做。您只需要在特定元素上设置较低的不透明度。 @SLowLoris 但是怎么做？ h1 嵌套在 html 中，因此根据 css 优先级，h1 的规则应该覆盖 html 的规则 @geeksal opacity 不能被覆盖。如果您有一个不透明度为 0.5 的元素和该元素中的一个不透明度为 0.5 的子元素，则该子元素的不透明度将为 0.25。它已经降低了其父级的不透明度，并进一步降低了其自身的指令。很简单 @SLowLoris 谢谢我不知道 【参考方案1】：如果您将父元素的不透明度设置为 0.5 ，则所有子元素都将获得该不透明度。我建议您使用透明的 img 作为背景，或者您可以将该背景赋予伪元素。
（我使用背景颜色作为示例，但您可以使用 background-image 和 opacity:0.5 代替。它仍然有效）
html
font-family: Garamond;
text-align: center;
position:relative;
html:before
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
margin:0 auto;
background:rgba(0,0,0,0.5);
content:"";
z-index:-1;
h1
opacity: 1;
<p id ="topBar"></p>
<h1>Heading</h1>
<h3>Name</h3>
<p>
Paragraph
</p>
<h3>Heading</h3>
<p>More text</p>
<h3>Send us an email!</h3>
<form>
<input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
<textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
<input type="submit" value ="Send" name="send">
</form>
<p id ="bottomBar"></p>【讨论】：
进一步澄清：在父 div 上将不透明度设置为 0.5，在该 div 内的段落上设置为 0.4 将导致子段落上的不透明度为 0.5*0.4=0.2。【参考方案2】：不透明度在这种特殊情况下不起作用，因为它继承自他的父级并且不能被覆盖。
我通过background: rgba(0, 0, 0, .5);更改了您的背景，然后不再需要更改文本的不透明度。
这是最简单的改变方法，只使用背景的不透明度。
JS fiddle here
html
background: url(pen.jpg) no-repeat center fixed;
background-size: cover;
font-family: Garamond;
text-align: center;
background: rgba(0, 0, 0, .5);
<body>
<p id ="topBar"></p>
<h1>Heading</h1>
<h3>Name</h3>
<p>
Paragraph
</p>
<h3>Heading</h3>
<p>More text</p>
<h3>Send us an email!</h3>
<form>
<input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
<textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
<input type="submit" value ="Send" name="send">
</form>
<p id ="bottomBar"></p>
</body>【讨论】：
【参考方案3】：默认情况下，如果父元素应用了不透明度，那么所有子元素也采用相同的不透明度。即使您将子元素设置为 opacity:1 它也不起作用。 在您的情况下，“html”具有不透明度：0.5，因此其子级即“h1”具有不透明度：1 仍将具有 0.5 不透明度。
对于您的问题，有 2 个解决方案：- 1.通过Photoshop等照片编辑软件将背景图片（即“pen.jpg”）稍微透明。 2.在'after'伪代码中使用背景图像。即
html::after
content: "";
background: url(pen.jpg);
opacity:0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
以上任何一种都适合你。
【讨论】：
我的答案不正确吗？为什么投反对票？ Downvote 不是来自我，但我认为是因为这句话：In your case 'html' has opacity:0.5 so its child i.e 'h1' having opacity:1 won't do any difference. 但实际上如果你在另一个不透明度 0.5 元素内有一个不透明度 0.5 元素，效果将是 0.25 不透明度，所以它们是有区别的。也许你可以编辑那句话...
谢谢@gregn3。我编辑了我的句子。
我认为这是正确的，所以我投了赞成票。【参考方案4】：
您还可以将背景应用于正文元素而不是 html。因为所有可见的内容都在body标签里面
body
background:rgba(255,0,0,0.5);
font-family: Garamond;
text-align: center;
opacity: 0.5;
h1
opacity: 1;
<p id ="topBar"></p>
<h1>Heading</h1>
<h3>Name</h3>
<p>
Paragraph
</p>
<h3>Heading</h3>
<p>More text</p>
<h3>Send us an email!</h3>
<form>
<input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
<textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
<input type="submit" value ="Send" name="send">
</form>
<p id ="bottomBar"></p>【讨论】：
以上是关于为啥在将html元素的不透明度更改为0.5后，我不能将h1元素的不透明度改回1？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章