我试图使我的背景图像透明,并且页面的其余部分不透明,例如在非褪色
HTML和CSS之上的褪色背景图像.
我有一个HTML页面,使用div作为背景图像.以下是该页面的简化版本：
<HTML>
<head>
<style type="text/css">
#backgroundImage {
background-image: url('../Documents/images/Sea.jpg');
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.4;
filter:alpha(opacity=40);
height:100%;
width:100%;
z-index:0.1;
}
.main{
height:500px;
width:900px;
margin:auto;
background-color:green;
z-index:1;
opacity: 1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div id="backgroundImage">
<div class="main">
</div>
</div>
</body>
我在以下问题中找到了此设置：
它几乎可以工作,除了整个页面是透明的,而不仅仅是背景图像.
我已经尝试调整’main’div上的Z-index和opacity,但它不起作用.
我也试过这个问题,但它似乎没有提供解决方案：
How do i make my background image transparent in CSS if I have the following code?
还有这个：
我没有足够的声誉来发布我想要实现的图像.
解决方法
HTML：
<div id="backgroundImage">
<div class="main">
</div>
</div>
CSS：
#backgroundImage{z-index: 1;}
#backgroundImage:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(http://static.tumblr.com/25bac3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.4;
filter:alpha(opacity=40);
height:100%;
width:100%;
}
.main{
height:320px;
width:320px;
margin:auto;
background-color:green;
z-index:-1;
opacity: 1;
filter:alpha(opacity=100);
}
网站参考：http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
