使 CSS 背景图像变暗

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

这是您可以在不丢失任何应用效果的情况下使背景图像变暗的方法。

   

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

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