在CSS中添加不透明的背景图像
在CSS中添加不透明的背景图像
提问于 2018-07-20 07:55:51
我一直在努力让我的背景图像填满我的页面的整个背景，并有一个不透明。它只想改变我的文本的不透明度。我知道我错过了一些简单的东西。我试着把它放在它自己的类中，但没有成功。我遗漏了什么？
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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-20 08:03:18
使用一个固定的伪元素(在本例中为::before)，它填充正文，并具有z-index: -1，因此它将出现在正文的内容下：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51433271
复制相关文章
相似问题
腾讯云开发者
