为什么在将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 谢谢我不知道

标签： html css opacity

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

【讨论】：