我想设置一个图像作为整个页面的背景,但也希望使用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>

推荐答案

我会把你的内容包装成内分区.然后你也可以使用position来处理不透明度,而不会影响背景图像.

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

Html相关问答推荐

CSS Flex行之间的空间很大

如何使用bslb设置可导航页面侧边栏的样式

电话号码验证器(Angular )

在 bootstrap 中的弹性项之间添加连接行

滚动两个不同高度的DIV;一个等待另一个

类型';联系人组件';上不存在属性';name FormControl';

如何从多个TO中获取一个范围标记以溢出其父标记

从触发元素移动到有间隙的内容时 CSS 工具提示关闭

使单行路径的 svg 填充父级的 100% 宽度

将组件移动到页面底部 Angular

白色栏超出页面100%的右侧

如何使用CSS Select 同级元素的::before伪元素?

如何调整底部有 SVG 的元素的高度,使其在所有宽度上看起来都不错?

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

使用 R markdown 在 html 中包含图像

调整窗口大小时文本重叠导航栏

如何清除html输入中的文本

为什么图像会影响我的

按部分划分的表行带

在部分而不是正文中定义页面宽度