背景需要有漸變

我完全是CSS的noob，我需要添加漸變到頁面頂部的背景圖像。這裏是我嘗試的，但顯然它不作爲覆蓋值的背景。我該如何解決它背景需要有漸變

我有一個背景圖像，我需要一個漸變的頂部。這裏是我的CSS

body.test { 
    /* Mozilla: */ 
    background: -moz-linear-gradient(top, #00FF00, #000000); 
    /* Chrome, Safari:*/ 
    background: -webkit-gradient(linear, 
    left top, left bottom, from(#00FF00), to(#000000)); 
    /* MSIE */ 
    filter: progid:DXImageTransform.Microsoft.Gradient(
     StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0); 
background: url(../mybackground.png); 
}

測試下面 http://jsfiddle.net/PsDuF/

來源

2012-08-09 Autolycus

你的例子很混亂。你有一個大的JPG圖像，已經有一個漸變。你是否試圖在該圖像上放置另一個漸變？ – 2012-08-10 01:50:59

變化

background: url(../mybackground.png);

到

background-image: url(../mybackground.png);

background是簡寫語法。另外，您也可以在圖像與其他語法相結合：

background: url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);

在你的情況，你正在申報background多次，所以每次你聲明它的時候，你是壓倒一切的與先前的聲明。

當您在一個聲明中聲明多個背景時，聲明它們的順序將更改堆疊順序。使用圖像和mozilla背景漸變的JSBIN示例：jsbin.com/abumuz/1

請注意，如果您想要圖像頂部的漸變，但仍然希望看到圖像，則需要確保漸變具有alpha透明度。

來源

2012-08-09 22:14:14

試過了.. ..我看不到任何漸變頂部 – Autolycus 2012-08-09 22:19:00

累了什麼？你能向我們展示一個jsbin例子嗎？ – 2012-08-09 22:19:46

背景圖像坐在漸變的ontop現在，所以我不能看到漸變 – Autolycus 2012-08-09 22:22:15

首先，看看這個tool創建CSS漸變。

來源

2012-08-09 22:14:23

我已經知道那個工具了......我的問題是別的 – Autolycus 2012-08-09 22:31:14

背景需要有漸變

回答

相關問題