问题描述
我想让我的背景图片透明,而其余的页面不透明,例如褪色的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);
}
网站参考:
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背景图片透明的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!