變暗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背景圖像

回答

相關問題