我试图使我的背景图像透明,并且页面的其余部分不透明,例如在非褪色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,但它不起作用.
我觉得这是一个简单的修复,但我无法看到解决方案.
我也试过这个问题,但它似乎没有提供解决方案:
还有这个:
我没有足够的声誉来发布我想要实现的图像.
小智 2
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