你可以在背景圖片上疊加透明css3漸變嗎？

我想把css3漸變放在背景圖片的頂部。使用下面的代碼在我的漸變之上放置一個背景圖像，但我試圖以相反的方式做到這一點，所以漸變充當頂部的蒙版。你可以在背景圖片上疊加透明css3漸變嗎？

url(images/darkwood.png), 
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat, 
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat; 
background: 
url(images/darkwood.png), 
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

感謝您的幫助

來源

2011-11-08 Pineapple Sunset

你可以做一個[演示的jsfiddle（http://jsfiddle.net/）你有什麼這麼遠嗎？你可以上傳圖片[here]（http://imgur.com/）。 – thirtydot

我有我的一個網站做到這一點，希望這對你的工作;

body { 
    margin: 0; 
    padding: 0; 
    background: url('img/background.jpg') repeat; 
} 

body:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%); 
}

來源

2011-11-08 11:01:27 DoubleYo

我一直在尋找這樣做很長一段時間的東西。我做的唯一改變是'position：fixed'。 – seaneshbaugh

你，先生，是一顆寶石。 – Aaronius

這正是我正在尋找的..謝謝！ – fbonetti

上面的例子不會使用resizeable divs。

你的代碼可以正常工作。但據我瞭解，CSS從右側讀取左側。所以，你將不得不使用下列內容：

div { 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat; 
}

例子： http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/

來源

2011-11-08 13:46:15 Alan

你可以在背景圖片上疊加透明css3漸變嗎？

回答

相關問題