使 HTML 正文背景图像透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29444206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make HTML body background image transparent
提问by user4420358
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.
我试图使我的背景图像透明，而页面的其余部分不透明，例如在非褪色 HTML 和 CSS 顶部的褪色背景图像。
I have an HTML page with an image as the background using a div. Below is a simplified version of the page:
我有一个 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>
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.
我曾尝试调整“主”div 上的 Z-index 和不透明度，但它不起作用。
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.
我没有足够的声誉来张贴我正在努力实现的目标。
采纳答案by Discern
HTML:
HTML：
<div id="backgroundImage">
<div class="main">
</div>
</div>
CSS:
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
网站参考：http: //nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
回答by user3475283
What you basically want to do is that the Background image should be a Watermark. The best approach would be:-
您基本上想要做的是背景图像应该是水印。最好的方法是：-
<style>
div.image
{
width:500px;
height:250px;
background:url(images.jpg);
background-repeat:no-repeat;
background-position:center;
border:2px solid;
border-color:#CD853F;
}
div.transparentbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid;
border-color:#CD853F;
opacity:0.6;
filter:alpha(opacity=60);
}
div.transparentbox p
{
margin:30px 40px;
font-weight:bold;
color:#CD853F;
}
</style>
</head>
<body>
<div class="image">
<div class="transparentbox">
<p>Hello World<br>
</p>
</div>
</div>
div.image
div.image
I am creating a div tag for set background image. by the help of Height and Width I am giving the size, by the help of background:url set the background image, by the help of background-repeat image never repeated if image size is small, background-position set the position of image, border: give the border which is solid, border-color: attribute is for give the color of border.
我正在为设置背景图像创建一个 div 标签。借助 Height 和 Width 我给出尺寸，借助 background:url 设置背景图像，借助 background-repeat 图像，如果图像尺寸小，则永不重复，background-position 设置图像的位置， border：给出实心的边框，border-color：属性用于给出边框的颜色。
div.transparentbox
div.transparentbox
By the help of this tag we make the transparent box, margin attribute is use for the set the margin of the data, background-color: is use for set the back ground color, opacity is use for give the transparency of the box, filter:alpha(opacity=60); is set the compatibility For IE8 and earlier.
借助这个标签，我们制作了透明框，margin 属性用于设置数据的边距，background-color: 用于设置背景颜色，opacity 用于设置框的透明度，过滤器:alpha(不透明度=60); 设置兼容 IE8 及更早版本。
div.transparentbox p
div.transparentbox p
this is given the style of
这是给定的风格
tag,this will set the margin, font weight and font color.
标签，这将设置边距、字体粗细和字体颜色。
