我已经创建了一个 HTML 页面。我的页面中有一个背景图片。我想更改背景的不透明度 即背景中使用的图像的不透明度。我正在使用此代码向我的页面添加背景图片:
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: url('IMG_18072014_115640.png')}
</style>
</head>
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
</html>
如何更改此代码以更改此背景图像的不透明度。
最佳答案
将 background-image 应用到 body 的 :after :pseudo-element 并更改其 opacity，这样 body 的内容就不会受到影响。
body, html {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://www.lorempixel.com/600/400);
opacity: 0.3;
z-index: -1;
}<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>关于css - 在 HTML 中更改背景图像的不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27861414/