首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在CSS中添加不透明的背景图像

在CSS中添加不透明的背景图像
EN

Stack Overflow用户
提问于 2018-07-20 07:55:51
回答 1查看 22关注 0票数 1

我一直在努力让我的背景图像填满我的页面的整个背景,并有一个不透明。它只想改变我的文本的不透明度。我知道我错过了一些简单的东西。我试着把它放在它自己的类中,但没有成功。我遗漏了什么?

代码语言:javascript
复制
    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;
         }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-20 08:03:18

使用一个固定的伪元素(在本例中为::before),它填充正文,并具有z-index: -1,因此它将出现在正文的内容下:

代码语言:javascript
复制
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: '';
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51433271

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档