Html 如果我有以下代码，如何在 CSS 中使我的背景图像透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14466102/
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
How do i make my background image transparent in CSS if I have the following code?
提问by code--shitter
I am trying to make my background image slightly transparent. I read another article here on this topic but it did not work when I tried it. I hope I didn't give too little or too much info. Here is my HTML code:
我正在尝试使我的背景图像稍微透明。我在这里阅读了另一篇关于这个主题的文章，但在我尝试时它不起作用。我希望我没有提供太少或太多的信息。这是我的 HTML 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Title</title>
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet1.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet2.css">
<link type="text/css" rel="stylesheet" href="../Stylesheets/stylesheet3.css">
</head>
<body>
<div id="container">
<div id="background" class="translucent"></div>
<div id="content">
<div id="backgroundIMG">
</div>
</div>
<H1><div align="center">A heading</div></H1>
<p>
<div style="width:890px;height:40px;border:5px dotted Coral;">
CONTENT
</div>
<p>
CONTENT
<div class="index">
<H2>Index</H2>
Home (on now)
<br>
<a href="page2.html">Bored Main Page</a>
<br>
<a href="page3.html">Tables are here!</a>
</div>
</div>
</body>
Here are my stylesheets:
这是我的样式表：
stylesheet1:
样式表1：
html
{
font-weight: bold;
}
body
{
margin-left:30px;
margin-right: 30px;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
stylesheet2:
样式表2：
.index
{
line-height: 1.5em;
padding: 1em;
border: DarkGreen solid 5px;
text-align: left;
width: 890px;
}
.bgCyan
{
background-color: cyan;
color: #525252;
}
.bgGreen
{
background-color: LightGreen;
color: DarkBlue;
}
.bgBoredText
{
background: url(../Images/my_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.translucent
{
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
stylesheet3:
样式表3：
#container
{
position: relative;
width: 200px;
height: 200px;
}
#background, #content
{
position: absolute;
top: 0;
left: 0;
}
#backgroundIMG
{
background-image: url(../Images/my_image.jpg);
}
Thank you in advance
先感谢您
回答by chipcullen
As far as I know, CSS can't alter the opacityof a background image. You will have to alter the image in an image editing program to reduce it's opacity.
据我所知，CSS不能改变不透明一个的背景图像。您必须在图像编辑程序中更改图像以降低其不透明度。
回答by Cathy
I had the same question, and found the answer from a response to another StackOverflow question. The trick is to use the :after property of the body element. link
我有同样的问题，并从另一个 StackOverflow 问题的回复中找到了答案。诀窍是使用 body 元素的 :after 属性。关联
body:after {
content: "";
background-image:url('http://www.w3schools.com/css/klematis.jpg');
background-repeat:repeat;
background-position:center;
background-attachment:fixed;
background-size:cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
回答by Hans Vn
Add this css to your #backgroundIMG
将此 css 添加到您的 #backgroundIMG
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
opacity: 0.5;
note that there are some difficulties when your page is viewed with different browsers. For example: IE8 (and earlier) doesn't work with the opacity parameter.
请注意，使用不同的浏览器查看您的页面时会遇到一些困难。例如：IE8（及更早版本）不适用于 opacity 参数。
