Question

我想让背景图片变暗。我发现我必须使用不透明度，所以我写了我的css代码：

body {
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, Times, serif;
        background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../pics/parachute.jpg');}

一切正常！然而，当我添加一些标志来制作全屏背景图片时，我的效果消失了。

body {
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, Times, serif;
        background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../pics/parachute.jpg');
        -webkit-background-size: cover;
        -moz-background-size:  cover;
        -o-background-size: cover;
         background-size: cover;}

它不起作用的原因是什么？

Answer 1

这样可以在不失去任何效果的情况下使背景图像变暗。

＆＃13;

   

    .bg{
      background: url('http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg');
      height: 500px;
      -webkit-background-size: cover;
      -moz-background-size:  cover;
      -o-background-size: cover;
       background-size: cover;
    }
    .content{
      background: rgba(0,0,0,0.4);
      color: white;
      height: inherit;
      padding-left: 10px;
    }

＆＃13;

<div class='bg'>
        
   <div class='content'>
     <p>
        Some content Some content Some content Some                content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some 
 
    </p> 
  </div> 
 </div>

＆＃13;

使CSS背景图像变暗

1 个答案: