0

我正在尝试使我的背景图像稍微透明。我在这里阅读了有关此主题的另一篇文章，但尝试时却没有用。我希望我没有提供太少或太多的信息。这是我的 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>

这是我的样式表：

样式表1：

html
{
    font-weight: bold;
}

body
{
margin-left:30px;
margin-right: 30px;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

样式表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 */
}

样式表3：

#container
{
position: relative;
width: 200px;
height: 200px;
}

#background, #content
{
position: absolute;
top: 0;
left: 0;
}

#backgroundIMG
{
background-image: url(../Images/my_image.jpg);
}

先感谢您

4

3 回答 3

2

据我所知，CSS 不能改变背景图片的不透明度。您必须在图像编辑程序中更改图像以降低其不透明度。

于 2013-01-22T19:11:47.027 回答
1

我有同样的问题，并从另一个 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;
    }
于 2014-10-08T16:53:28.157 回答
0

将此CSS添加到您的#backgroundIMG

 -khtml-opacity: 0.5; 
 -moz-opacity: 0.5; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  opacity: 0.5;

请注意，使用不同浏览器查看您的页面时会遇到一些困难。例如： IE8（及更早版本）不适用于 opacity 参数。

于 2013-01-22T19:13:55.513 回答