2

好的，所以我一直在为我的教育专业需要满足的技术课程输入一些 HTML 代码。这就是我的背景：

body {
    background-image:url('islandbeach.jpg');
    background-repeat:repeat;
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
}

现在，我想让我的背景透明或褪色，这样我就可以看到我拥有的文本和其他图像。背景颜色太鲜艳，不用眯着眼睛就能看到文字。是否有任何 HTML 代码可以为我做到这一点？我不是这方面的专家，我一直在按照我的教授告诉我的一切去做，如果你有答案，请逐步解释。非常感谢你！

4

3 回答 3

1

这是一个简单的技巧，您可以使用 :after 属性进行操作。

CSS代码 

        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;
        }

js bin 演示 http://jsbin.com/welcome/50098/

于 2012-11-17T04:56:33.763 回答
1

尝试这个

.bg {
    width:280px;
    height:100px;
    position:relative;
    display:block;
}

.bg:after {
    background: url(https://www.google.co.in/images/srpr/logo3w.png);
    opacity: .5;
    width:280px;
    height:100px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    content: "";
}

这是jsfiddle 文件

于 2012-11-17T05:04:50.117 回答
1

选项 1：使用褪色背景，以便您将编写的文本或您使用的图像可读。

选项 2：您的 Body 标签具有图像，并且带有 bgopc 类的 div 将位于其之上，白色并降低不透明度......因此您的图像将变得透明。现在其他具有 id 容器的 div 将充当您的图像和内容的容器。 

<body>
   <div class="bgopc">&nbsp;</div>
   <div id=container>Add your Text and Images inside this container </div>
</body>

现在 CSS 将是

body {background-image:url('islandbeach.jpg');background-repeat:repeat;background-position:center;background-attachment:fixed;background-size:cover;}
.bgopc{max-height:100%;background:#fff;position:absolute;top:0;left:0;width:100%;
height:100%;opacity:0.4;filter:alpha(opacity=40);z-index:1}
#container{z-index:2;position:relative}

我希望它能解决你的问题。

于 2012-11-17T05:17:54.820 回答