如何在CSS中添加具有不透明度的背景图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (50)

我一直在努力让我的背景图像填满我的页面的整个背景并具有不透明度。它却改变我的文本的不透明度。

    body{
        background: url(background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        opacity: .7;
         }
提问于
用户回答回答于

使用固定的伪元素(::before(在本例中),它填充body,并具有z-index: -1,所以它将出现在body的内容下面:

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url(https://picsum.photos/200/300) no-repeat center center fixed;
  background-size: cover;
  opacity: .7;
  content: '';
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec pharetra dui. Integer porttitor sit amet lacus non egestas. Donec ac posuere ex. Donec sed ex eu lorem pharetra condimentum id ut sem. Quisque sagittis molestie odio ultricies sodales. Nullam vulputate ultricies purus, ac sodales orci hendrerit quis. Proin eu purus et magna condimentum sollicitudin. Vestibulum nec nunc imperdiet, cursus turpis a, ultricies justo. Morbi cursus ullamcorper dolor, in semper ipsum faucibus at. Nulla et est non lectus tristique condimentum. Vivamus id diam et libero placerat placerat. Donec tincidunt, massa at porttitor pharetra, nulla ipsum dignissim nulla, eget accumsan neque nulla a erat. Phasellus vel lobortis ligula.</p>

<p>Nam dignissim vestibulum nibh, vel convallis ante porta eu. In ultrices velit ac mi fermentum, eget porttitor libero dictum. Vestibulum posuere odio tortor, ut scelerisque quam ullamcorper sed. Pellentesque eget libero diam. Mauris malesuada metus vel placerat tempus. Aenean feugiat sed metus vel posuere. Nunc interdum fermentum lacinia. Nunc lacinia aliquam magna, nec mattis tellus. Sed eleifend turpis eget sem ultrices, vehicula dictum ipsum egestas. Cras nisl lacus, congue quis rutrum sit amet, congue at justo. Integer sagittis ante quis ante ullamcorper consectetur. Proin non varius enim, a ornare nisi. Etiam euismod velit ac enim pellentesque aliquam. Donec aliquam finibus leo, ac cursus mi convallis eu.</p>

<p>Curabitur nec condimentum quam. Sed eget augue aliquet, pulvinar turpis cursus, rutrum tellus. Aenean accumsan placerat felis et tristique. Nam laoreet erat sit amet volutpat rhoncus. Duis sagittis egestas nulla ut luctus. Sed erat ipsum, egestas eu elementum eu, mattis eget quam. Aenean condimentum urna ac neque blandit congue. Ut malesuada, felis eu pretium bibendum, ante lectus mollis turpis, a consectetur lacus turpis ullamcorper nulla. Nam facilisis arcu lectus. Nulla sed faucibus turpis, sed facilisis augue. Nullam consequat euismod pretium. Fusce orci ligula, interdum sed ante at, hendrerit malesuada nibh.</p>

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动