如何在CSS背景上應用漸變效果？

我正在用CSS3弄溼自己的腳，並且盡我最大努力將Photoshop壓縮文件轉換爲HTML格式。如何在CSS背景上應用漸變效果？

我有不同高度的背景（使用背景網址）的多個實例，我想使用rgba gradients（使用alpha通道）在該背景上應用漸變。我顯然希望遠離具有像素內置漸變的靜態背景圖像。

有沒有辦法在CSS中通過在背景網址頂部「堆疊」漸變來做到這一點？我猜如果我不能在一個元素中做到這一點，我會在我的背景元素中放一個容器，將它浮起來，並使寬度和高度填充背景元素，但是這看起來很凌亂。

任何意見是讚賞！謝謝你的時間！

這裏有相同的背景和梯度的兩個例子，但在不同的高度：一個導航和頁腳

Nav with background and slight gradient enter image description here

的代碼會是這個樣子：

<nav> 
<ul> 
    <li>Menu item 1</li> 
    <li>Menu item 2</li> 
    <li>Menu item 3</li> 
    <li>Menu item 4</li> 
</ul> 
</nav>

款式：

nav { 
    background : url('repeating-background-image.png') repeat; 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
}

來源

2013-07-24 Barrett Kuethen

你的代碼在哪裏？ – falguni

有沒有辦法在CSS中將背景上的漸變「疊加」到背景中？

是：CSS3允許multiple background images，用逗號分隔。

由於梯度行爲像的圖像，你可以結合背景圖片使用它們：

div { 
    width: 400px; 
    height: 400px; 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome10+,Safari5.1+ */ 
}

http://jsfiddle.net/kReNL/

這並不在IE 8的工作或更早的版本，但後來沒有做CSS漸變。（儘管微軟的filter屬性在IE 8及更早版本中起作用，並且確實支持alpha透明度漸變 - 請參閱Can you use rgba colours in gradients produced with Internet Explorer’s filter property?）。

來源

2013-07-24 13:24:03

http://jsfiddle.net/8gvZM/

background: #ffffff; /* old browsers */ 
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ 
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed',GradientType=0); /* IE6-9 */

，並使其上面一個div上較低的不透明度背景網址。

這是你的意思嗎？

來源

2013-07-24 12:12:20

這就是它，如果它也有一個背景網址。我在想漸變會有較低的不透明度，並且位於bg網址之上。我不確定您是否可以降低bg網址的不透明度。 –

降低div本身的不透明度？ –

使用CSS :before創建位於原始元素頂部的附加（僞）元素。

原始元素將具有圖像背景，並且:after元素將具有漸變，並具有不透明度設置，以便原始元素通過它顯示。

div { 
    width: (whatever size you want to set it to) 
    height: (ditto) 
    position:relative; 
    background:url('mainImage.jpg'); 
    z-index:5; 
} 

div::before { 
    content:''; 
    width: .... (same as main div) 
    height: .... (same as main div) 
    position:absolute; 
    z-index:-3; 
    display:block; 
    opacity:0.5; 
    background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */ 
}

我已經做了的jsfiddle爲您展示：see here

希望有所幫助。

[編輯]稍微改變了上述答案的細節以迴應OP的評論。現在使用:before而不是:after，並使用z-index對事物進行分層，以便實際文字內容在兩個背景上均可見。

來源

2013-07-24 13:00:05 Spudley

我喜歡這個，但是，如果:: after divider變得不透明，你怎麼顯示你的內容？ –

使用'z-index'的小提琴的更新版本顯示文本正確顯示在兩個背景上 - http://jsfiddle.net/x3Uxe/2/ – Spudley

如何在CSS背景上應用漸變效果？

回答

相關問題