使HTML body背景图片透明 [英] Make HTML body background image transparent
问题描述
我想让我的背景图片透明，而其余的页面不透明，例如褪色的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>
以下问题：
它几乎可以工作，除了整个页面是透明的，而不只是背景图像。
我已经尝试调整Z索引和透明度'div，但它不工作。
我觉得这是一个简单的修复，但我只是看不到解决方案。
我也试过这个问题，但它似乎没有提供解决方案：
我没有足够的信誉
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
I am trying to make my background image transparent, and the rest of the page not transparent, eg a faded background image on top of non faded HTML and CSS.
I have an HTML page with an image as the background using a div. Below is a simplified version of the page:
<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>I found this setup in the following question:
and it almost works, except that the whole page is transparent, not just the background image.
I have tried adjusting the Z-index and opacity on the 'main' div, but it is not working.
I feel this is a simple fix but I just cant see the solution.
I also tried this question, but it did not seem to offer a solution:
How do i make my background image transparent in CSS if I have the following code?
and this one:
I do not have sufficient reputation to post an image of what I am trying to achieve.
解决方案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); }Site reference: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
这篇关于使HTML body背景图片透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
