2012-02-17 95 views
16

我想要創建一個線性漸變背景,它適合不管瀏覽器窗口的大小,以適應固定高度的標題,子標題和內容div 。CSS3逐個像素的漸變,而不是百分比

我的問題是我不希望漸變在我移動頁面時進行縮放。我想我可以使用1px寬的圖像來獲得相同的結果,但是我最終希望網站儘可能沒有圖像,除去徽標。

是否可以使用像素定義的漸變而不是百分比定義的漸變?

回答

27

是的,你可以。您可以用標準單位代替百分比。看到這個例子:

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%); 

更新

您需要包括爲了使用上面的例子中,瀏覽器的前綴。

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
+1

適用於該網站,但不適用於實踐。 Chrome和Firefox都不顯示我Mac上的漸變... – Smittles 2012-02-17 23:56:27

+2

@JonMitten dabblet呈現時沒有前綴。對不起,我已經更新了樣本以包含它們。 – 2012-02-17 23:59:32

+0

太棒了,這是完美的。似乎工作得很好 - 但是,我注意到當瀏覽器窗口調整大小時,瀏覽器呈現「鋸齒」。這可能是我正在使用的部門級別的結果。我不相信這太讓人分心了。 – Smittles 2012-02-23 17:03:16

7

如果你想有一個固定大小的梯度,使用background-size屬性來指定它的大小:他們會作如下規定。

+0

這也是一個很好的選擇。使用'background-position'和'background-repeat'來微調。 – Wtower 2014-03-12 11:02:13