如何防止CSS漸變色帶？

我開始使用CSS漸變，而不是實際的圖片，有兩個原因：第一，CSS梯度肯定比加載圖像更快，第二，他們不應該表現出條紋，像這麼多的光柵圖形。我最近在各種屏幕上開始測試我的網站，並在較大的屏幕上（24+英寸），構成我網站背景的CSS線性漸變顯示出非常明顯的條帶。作爲一個臨時修復，我用一個小的，重複的，透明的噪聲圖像覆蓋了漸變，這有點幫助。有沒有其他方法可以解決這個問題？如何防止CSS漸變色帶？

來源

2012-07-26 John Doe

1）它是依賴於瀏覽器的渲染。 2）這取決於你的顯示器。 – Christoph 2012-07-26 10:20:56

我決定使用一個基於@Michael Giovanni Pumo的答案：在Photoshop中創建一個1px高度的漸變，使用模糊，紋理和其他抖色方法去除條紋，並使其具有repeat-x。 – 2012-07-26 11:26:44

我知道你不會喜歡這種聲音，但唯一的真正的方式現在在這種情況下獲得一致的跨瀏覽器美學是使用重複的圖像。

如果它是一個簡單的線性漸變，那麼你只需要它是1px寬和高度漸變，然後使頁面的背景顏色作爲漸變的最終顏色，使其運行平穩。這將保持文件的大小很小。

如果你想降低您的圖像梯度帶，使用PNG（不透明度），因爲我覺得這是更適合比JPG的用於這一目的。

在Adobe煙花，我想這個導出爲PNG-24。

祝你好運。

http://codepen.io/anon/pen/JdEjWm

#gradient { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); 
    background: -webkit-linear-gradient(top, black, white); 
    background: -moz-linear-gradient(top, black, white); 
    background: -ms-linear-gradient(top, black, white); 
    background: -o-linear-gradient(top, black, white); 
    background: linear-gradient(top, black, white); 
}

來源

2012-07-26 10:17:57

有沒有真正去除條帶任何方法。 CSS漸變受到瀏覽器各種渲染引擎的支配。一些瀏覽器只比其他瀏覽器更好。你可以做的最好的做法是用較短的區域覆蓋更大的顏色範圍，以增加漸變步驟....然後等待瀏覽器重新渲染以改善效果。

來源

2012-07-26 09:35:56 Scott

您可以通過您的梯度從第一顏色到透明，具有background-color下你的第二個顏色產生較佳的成果。我還建議玩background-size，以適應跨越屏幕的大梯度，所以梯度實際上並不會填滿整個屏幕。

來源

2013-03-05 17:08:58 AlexKempton

我可以確認在背景顏色上重疊漸變實際上效果更好。另外嘗試交換背景顏色和漸變顏色，因爲其中一個選項似乎總是看起來更好（webkit/blink） – 2016-09-30 22:25:20

我做了一個「scatter.png」把我的梯度。就像這樣：

打開GIMP
100x100的圖像
添加alpha通道
濾鏡 - >雜色 - >投...接受默認
設置opactity至5％

保存然後添加到漸變。

background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);

這是一個很微妙的影響潛移默化的作用。

來源

2016-09-23 13:30:42

對於純粹的CSS答案，您可以使用模糊濾鏡爲CSS漸變添加模糊並減少條紋。這可能意味着某些層次結構的重建不會模糊內容，您需要隱藏溢出以獲得清晰的邊緣。在帶狀問題可能特別嚴重的動畫背景中工作得非常好。

.blur{ 
    overflow:hidden; 
    filter: blur(8px); 
}

來源

2017-09-01 14:33:11 Sven

我知道這個問題是長期解決，但對於其他人遇到帶和尋找一個解決方案，一個很簡單的辦法解決我只是簡化了我包含在我的漸變中的顏色。例如：

這種梯度產生條紋：

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%, 
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

這種梯度不和看上去大同小異：

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);

來源

2018-01-15 04:18:24

如何防止CSS漸變色帶？

回答

相關問題