变暗CSS背景图像

我想变暗背景图片。我发现我必须使用不透明度，所以我写了我的css代码：变暗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;}

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

来源

2016-10-25 Monica

需要叠加在背景上一个div，并给它渐变或RGBA – Araz

这是同一个问题：http://stackoverflow.com/questions/9182978/semi-transparent- color-layer-over-background-image – Dumitru

在这两种情况下，你的代码对我来说都是完美的[这里]（http://codepen.io/anon/pen/BLbYBJ）和[here]（http://codepen.io/ anon/pen/bwkLbv）。 – Martin

这是如何在不失去任何应用效果的情况下使背景图像变暗。


 

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

来源

2016-10-25 12:25:01 Abk

[Try CodePen]（http://codepen.io/anon/pen/wzOyWj）（因为它似乎不适用于jsFiddle） – Martin

变暗CSS背景图像

回答

相关问题