如何使用 CSS 给出整页背景图像并控制其不透明度？

Question

我想将图像设置为整个页面的背景，但还想使用 CSS 控制其不透明度而不影响内容的不透明度。是否可能，如果可以，我该怎么做？

目前我所做的是使用 html 标签将图像设置为背景，但因此当我更改不透明度时，内容也会受到影响。

html {
  background: url(https://picsum.photos/400/400); 
  /*  This image is used as an example  */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5
  /* Changing opacity like this also changes it for the whole content because html tag is used */
}

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

Answer 1

我会将您的内容包装在 div 内。然后你可以使用位置来处理不透明度而不影响背景图像。

* {
  margin: 0px; 
  padding: 0px;
}

.bg-img:after {
    content:'';
    background: url('https://picsum.photos/400/400') no-repeat center center;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;  
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}
.bg-img {
    position: relative;
    width:100%;
    padding:50px;
    font-weight:bold;
    text-align:center;
}

<div class="bg-img">
  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

</div>

如何使用 CSS 给出整页背景图像并控制其不透明度？

How to give full page background image and control its opacity using CSS?

html

css

background-image