Question

我在css中为我的html元素添加了一个背景图像，因此它会随着Web浏览器的大小而扩展。我将此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;
 }

Answer 1

默认情况下，如果父级应用了不透明度，则所有子元素也采用相同的不透明度。即使您将子元素设置为不透明度：1它也不起作用。

在你的情况下，'html'的不透明度为0.5，所以它的孩子即'h1'有不透明度：1仍然有0.5不透明度。

对于你的问题，有两种解决方案： -
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;   
}

上述任何一项都适合您。

Answer 2

如果将父级的不透明度设置为0.5，则所有子元素都将获得该不透明度。我建议您使用透明的img作为背景，或者你可以将该背景赋予伪元素。

（我使用背景颜色作为示例目的，但您可以使用background-image和opacity:0.5代替它。它仍然可以正常工作）

＆＃13;

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;
 }

＆＃13;

 <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>

＆＃13;

Answer 3

您还可以将背景应用于body元素而不是html。因为所有可见内容都在body标签内部

＆＃13;

body{
 background:rgba(255,0,0,0.5);


font-family: Garamond;
text-align: center;

opacity: 0.5;

}
h1 {

opacity: 1;
}

＆＃13;

 <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>

＆＃13;

Answer 4

不透明度在这种特殊情况下不起作用，因为它从父母那里继承并且不能被覆盖。

我按background: rgba(0, 0, 0, .5);更改了背景，然后无需再更改文字的不透明度。

这是更改它的最简单方法，只使用背景的不透明度。

JS fiddle here

＆＃13;

html {

background: url(pen.jpg) no-repeat center fixed;
background-size: cover;


font-family: Garamond;
text-align: center;

background: rgba(0, 0, 0, .5);

}

＆＃13;

<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>

＆＃13;

为什么在将html元素的不透明度更改为0.5后，我无法将h1元素的不透明度更改回1？

4 个答案: