我试图使我的背景图像透明，而页面的其余部分不透明，例如，在未褪色的 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>
我在以下问题中找到了这个设置：
如何使网站的背景透明而不使内容（图像和文本）也透明？ https://stackoverflow.com/questions/8565969/how-can-i-make-my-websites-background-transparent-without-making-the-content-i
它几乎可以工作，除了整个页面是透明的，而不仅仅是背景图像。
我尝试调整“主”div 上的 Z 索引和不透明度，但它不起作用。
我觉得这是一个简单的修复，但我只是看不到解决方案。
我也尝试过这个问题，但似乎没有提供解决方案：
如果我有以下代码，如何使 CSS 中的背景图像透明？ https://stackoverflow.com/questions/14466102/how-do-i-make-my-background-image-transparent-in-css-if-i-have-the-following-cod
和这个：
CSS 背景图像不透明度？ https://stackoverflow.com/questions/6890218/css-background-image-opacity
我没有足够的声誉来发布我想要实现的目标的图像。
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);
}
JSFiddle演示 http://jsfiddle.net/nbkLtwws/
站点参考：http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
