如何使Chrome中的漸變平滑？

，這是從Firefox截圖：

正是從這一梯度邊界在Chrome鋸齒狀的截圖清晰。我怎樣才能讓他們順利？

這裏是我的情況下，梯度的事項：

background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red), 
        linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red); 
background-size: 60px 60px; 
background-position:0 0, 30px 30px;

編輯：

更改背景大小40像素，使梯度順利，但我希望它是在各種規模平穩。

讓我知道是否需要提供額外的代碼。謝謝。

來源

2016-03-09 SanJeet Singh

也許我們提供您的HTML和你如何在梯度覆蓋的三角形，所以我們可以看到它是如何構成的？ – somethinghere

我不認爲HTML在這裏很重要，因爲只需在'body'上設置屬性就會產生輸出。 @SanJeetSingh：順便說一下，你使用的背景大小是多少？我在Chrome中使用'40px 40px'嘗試了它，並且它產生與Firefox相同的輸出。 – Harry

@Harry Yup，漸變光滑，40px。雖然我使用60像素。理想情況下，我希望漸變在所有維度上平滑。 –

原因是：

正如我在評論已經描述的，當一種顏色的結束點是的另一個（即，硬止擋梯度）的開始點，顏色的變化是突然的並且即使在其他瀏覽器（現在可能已經修復）中，以某個角度突然改變也會產生粗糙的邊緣。給出一種顏色的結束點和下一個顏色的開始之間的差距會產生更平滑的顏色變化，從而最大限度地減少粗糙的邊緣。

對於這個（或試驗和錯誤）而言，沒有太多的實驗需要，1％或2％的差距幾乎總是足夠的。

解決方法：

更改顏色停止點產生的顏色更流暢的變化，而不是給它一個硬停止似乎幫助。

body { 
 
    background-image: linear-gradient(45deg, red 24%, transparent 26%, transparent 74%, red 76%, red), linear-gradient(-45deg, red 24%, transparent 26%, transparent 74%, red 76%, red); 
 
    background-size: 60px 60px; 
 
    background-position: 0 0, 30px 30px; 
 
}

來源

2016-03-09 17:48:57 Harry

好@哈利！有很多原因，因爲這種事情是產生的。另一個大腦注意。謝謝！ –

是啊@MarcosPérezGude。我記得早些時候也遇到過'backface-visibility'選項，但由於某種原因，這個選項對此不起作用。所以是的，一個問題和不同的可能的變通辦法只適用於某些情況:( – Harry

嘗試此上梯度中的元素。

transform: translateZ(0);

它平滑漸變。見下文。

td.normal { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-image: linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red), 
 
    linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red); 
 
} 
 

 
td.smooth { 
 
    transform: translateZ(0); 
 
}

<table> 
 
<tr> 
 
    <td class="normal"></td> 
 
    <td class="normal"></td> 
 
    <td class="normal smooth"></td> 
 
    <td class="normal smooth"></td> 
 
</tr> 
 
</table>

來源

2016-03-09 17:13:01 Roy

它是由鉻的錯誤，即把那種背景作爲3D元件的製造。你可以避免寫一個邊框（它轉換爲平坦的元素），或者使用這個屬性。

transform-style: preserve-3d;

-webkit-backface-visibility: hidden; /* Webkit specifically! */

邊界解決方案

border: 1px solid #fff;

來源

2016-03-09 17:14:35

不幸的是這些解決方案都沒有工作。 –

你確定嗎？你可以用http://jsfiddle.net或stacksnippet來顯示問題嗎？ –

請稍候，我創造了小提琴:)。 –

嘗試增加backface-visibility: hidden

當我們要求瀏覽器傾斜圖像時，有時會發生這種情況。

來源

2016-03-09 17:15:44

如何使Chrome中的漸變平滑？

回答

相關問題