更改HTML中背景图像的不透明度
更改HTML中背景图像的不透明度
提问于 2015-01-09 13:15:04
我已经创建了一个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>如何更改此代码以更改此背景图像的不透明度。
回答 3
Stack Overflow用户
发布于 2015-01-09 13:19:55
将background-image应用于body的:after：伪元素并更改其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>
Stack Overflow用户
发布于 2015-01-09 13:18:31
我想你误解了html中的一些东西，
但一个简单的解决方案是制作一个透明的背景图像。(PNG24透明度)
Stack Overflow用户
发布于 2015-01-09 13:19:06
尝试使用此方法更改psudo element的不透明度：
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27861414
复制
![[Nginx] Nginx配置PHP应用传递PATH_INFO变量](https://ask.qcloudimg.com/http-save/yehe-2504969/a7dcdcb467c93c1f513c3e50150bedeb.png)
相似问题
jQuery动画以在画布上移动文本
在画布中动画对象
动态移动画布上的对象
可以使用ObjectAnimator在画布上为对象设置动画吗？
画布和Javascript对象上的Javascript动画
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
