Question

     html{ 
            background: url('web-design.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

我正在使用上面的CSS来显示我的网页的背景图片。但是，图像有点像我要在网页上显示的文本。

但是，如果我改变其不透明度，一切都会好的。我尝试使用上面的CSS中的opacity : 0.5，但这没有帮助。 如何更改此背景图片的不透明度？

我还尝试了制作包装<div>并设置其背景图像和不透明度。这也没有帮助。

我的HTML

<body>
        <div class="parent">
            <div class="content">
                <p id="dollar">$</p>
                <p id="name">variableName</p>
                <p id="equals"> = </p>
                <p id="value"> someValue </p>
            </div>
        </div>
</body>

我的css：

@font-face{
            font-family: "RobotoCondensed-Regular";
            src : url("RobotoCondensed-Regular.ttf");
        }

        body, html{
            height : 100%;
        }


        body:after{
            z-index:-1;
            background: url('web-design.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity:1;
        }

        .parent{
            height : 100%;
            display : flex;
            display : -webkit-flex;
            display : -moz-flex;
            display : -o-flex;
            align-items: center;
            justify-content: center;
        }
        .content{
            display : flex;
            display : -webkit-flex;
            display : -moz-flex;
            display : -o-flex;
            align-items: center;
            justify-content: center;
            background-color : rgba(,,,0.5);
            border-radius : 10%;
        }
        p{
            font-family : "RobotoCondensed-Regular";
            font-size : 32px;
        }

Answer 1

试试这个：

http://jsfiddle.net/WSEXC/

body {
    position: relative;
}

body:before
{
    content: "";
    z-index:-1;
     background: url(http://www.placehold.it/1200x800) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity:0.2;
}

Answer 2

html {
   position: relative;
}
html:after {
            background: url('web-design.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            position: absolute;
            opacity: 0.5; 
            filter: alpha(opacity=50);
}

我认为这应该有用。

Answer 3

这是工作演示。 http://jsbin.com/payixipa/1/

body {
  width: 500px;
  height: 500px;
  display: block;
  position: relative;
}
body:after{ 
   content: " ";
    position: absolute;
  z-index: -1; 
    top: 0;
  left: 0;
  bottom: 0;
  right: 0;
background: url('http://lorempixel.com/400/400') no-repeat; 
-webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 -moz-opacity:.50; 
  -webkit-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
        }

更改HTML背景图像的不透明度

3 个答案: