CSS中有沒有可能給漸變添加噪點？
這是我的徑向漸變代碼:
body {
color: #575757;
font: 14px/21px Arial, Helvetica, sans-serif;
background-color: #2f3b4b;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}我會在上面添加什么噪聲，給它紋理？
這是迄今為止最省事、最好的實現方式。這是純粹的CSS，做起來非常非常簡單，沒有額外的文件-什么都沒有。好吧，這可能不是最好的方法，但它工作得非常好，非常可靠(在非常舊的瀏覽器上測試時從未失敗)，并且加載非常快。
幾個月前找到它，并一直使用它，只需將這段代碼復制并粘貼到您的CSS中。
background-image: url(data:image/png;base64,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);然后添加你的背景顏色
background-color:#0094d0;演示:JSFiddle
來源: https://coderwall.com/p/m-uwvg
你想讓你的漸變有噪音嗎？你很幸運！
柏林噪聲是一種梯度噪聲。SVG標準指定了一個名為& lt惡臭& gt，它實現了Perlin函數。它允許合成人造紋理，如云或大理石& mdash你想要的噪音。
步驟1:定義一個SVG圖形 創建一個名為noise.svg的小SVG文件。
<svg
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='300' height='300'>
<filter id='n' x='0' y='0'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.75'
stitchTiles='stitch'/>
</filter>
<rect width='300' height='300' fill='#fff'/>
<rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>此圖形定義了兩個矩形。第一個用純色填充。第二個是半透明的，應用了噪聲過濾器。第二個矩形覆蓋在第一個矩形上以提供噪聲效果。
SVG選項 首先也是最明顯的是，你可以改變圖形的尺寸。然而，CSS背景重復屬性可以用來填充一個元素，因此300 &300應該夠了。
過濾器的類型屬性可以是fractalNoise或turbulence，用于指定過濾器功能。兩者都提供了不同的視覺，但在我看來，噪聲過濾器更微妙一些。
過濾器的基頻屬性范圍為0.5 & ndash0.9，以分別提供精細紋理的過程。在我看來，這個范圍對任何一種濾鏡都是視覺上的最佳選擇。
可以更改第一個矩形的填充以提供不同的基色。然而，后來，我們將這種顏色與半透明的CSS漸變結合起來，這也定義了一種顏色。所以白色是一個很好的起點。
第二個矩形的不透明度范圍為0.2 & ndash0.9設定濾鏡強度，數值越大，強度越大。
此時，您可以調整前面提到的選項，通過CSS將這個噪聲圖形設置為背景圖像，然后就到此為止。但是，如果你想要一個梯度，像OP，去第2步。
步驟2:應用CSS漸變 使用background-image屬性，您可以將SVG噪波圖形設置為任何元素的背景，并覆蓋一個漸變。在這個例子中，我將噪聲圖形應用到整個身體，并覆蓋一個線性梯度。
body {
/* white to black linear noise gradient spanning from top to bottom */
background:
linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
url('noise.svg');
}linear-gradient()函數創建一個偽圖像，疊加在noise.svg之上。結果是一個半透明的漸變，我們的噪波透過它顯示出來。
CSS選項 首先，也是最明顯的，定義的漸變顏色是可以改變的。但是，如果您想要沒有漸變的純色，請使兩種端點顏色相等。好處是您可以在整個站點或項目中使用帶有或不帶漸變的相同噪波圖形。
使用*-gradient()函數創建的多個圖像可以疊加在噪聲圖形上，并且可以在單個漸變函數中指定兩個以上的顏色參數和角度，以提供各種酷炫的視覺效果。
漸變參數的不透明度& mdash即rgba()和HSLA()& mdash；可以增加以增強定義的顏色并降低噪波級別。還是那句話，0.2 & ndash0.9是理想的范圍。
結論 這是一個高度可定制和非常輕量級(~400字節)的解決方案，允許您簡單地定義任何顏色或漸變的噪聲。雖然這里有幾個旋鈕可以轉動，但這僅僅是開始。還有其他SVG過濾器原語，如& ltfeGaussianBlur & gt并且& ltfeColorMatrix & gt，這可以提供額外的結果。
在css中目前還沒有給背景添加“噪音”的方法。
另一個解決方案是在圖形編輯器中創建一個透明的噪聲png。然后將該圖形作為背景應用于& ltdiv & gt。然后，您需要將& ltdiv & gt在& ltbody & gt這將給出帶有噪聲的梯度的外觀。
出于新奇的考慮，這里是一些沒有使用數據URI的純CSS噪聲:
#box {
width: 250px;
aspect-ratio: 1;
position: relative;
background:
repeating-radial-gradient(closest-corner at 1% 21%, rgba(255,0,255,.5), rgba(0,255,255,.5), #000 1.7%),
repeating-radial-gradient(closest-corner at 51% 51%, #fff, #fff, rgba(0,255,0,1) 10%);
background-size: 55px 10px;
}
#box::before {
position: absolute;
z-index: 1;
inset: 0;
background:
repeating-radial-gradient(closest-corner at 21% 21%, #fff, rgba(0,0,255,.5), rgb(3,0,255) 20%),
repeating-radial-gradient(closest-corner at 61% 21%, #fff, rgba(0,255,0,.5), rgb(3,0,255) 20%),
repeating-radial-gradient(closest-corner at 91% 51%, #fff, rgba(255,255,1,.5), rgb(055,255,255) 20%);
background-size: 15px 13px, 12px 22px, 12px 22px;
background-blend-mode: exclusion, normal;
mix-blend-mode: exclusion;
content: ''
}<div id="box"></div>現在是2023年，所以我的答案是:最好的選擇是使用輕量級的內嵌SVG過濾器和一個CSS聲明...它包括背景漸變。沒有外部文件，沒有任何基礎。此外，它很好地保留了非粒狀漸變，因為它不會影響對比度或亮度。
SVG過濾器將如下所示:
<svg width='0' height='0'>
<filter id='grainy' x='0' y='0' width='100%' height='100%'>
<feTurbulence type='fractalNoise' baseFrequency='.537'/>
<feColorMatrix type='saturate' values='0'/>
<feBlend in='SourceGraphic' mode='multiply'/>
</filter>
</svg>CSS代碼將如下所示:
background: filter(radial-gradient(circle, red, tan), url(#grainy))有什么條件？
現在(2023年1月初)它還不能在任何地方工作，盡管它應該很快就能在Safari中工作了。Safari是唯一實現了filter()函數的瀏覽器，該函數允許我們僅在背景圖像層上應用濾鏡，而不會影響元素的文本內容或后代。目前，即使在Safari中，它也只能處理url()圖像，盡管它應該很快也能處理CSS漸變。
我們仍然可以做到這一點，它跨瀏覽器工作:
background: radial-gradient(circle, mediumturquoise, darkslateblue);
filter: url(#grainy)現場演示
但是，如上所述，此過濾器會影響它所設置的整個元素，包括子體和文本內容。
為了避免這種情況，我們需要在一個pseudo上移動背景和過濾器聲明，絕對定位在它的父內容后面，覆蓋它的整個父內容演示區域。
這很容易做到，而且是跨瀏覽器的，但是如果支持filter()函數就更好了，不要僅僅為此使用一個pseudo，并且將所需的CSS減少到我們現在使用這種變通方法所需要編寫的大約15%。
這里是其他瀏覽器中的錯誤鏈接:
鉻
火狐瀏覽器
還有一件事:如果你真的不需要顆粒感，這只是一個很好的視覺增強，你可以存儲梯度在一個梯度自定義屬性，并有:
div {
--grad: radial-gradient(circle, mediumturquoise, darkslateblue);
background: var(--grad);
@supports (background: filter(conic-gradient(red, tan), blur(1px))) {
background: filter(var(--grad), url(#grainy))
}
}對于任何感興趣的人來說，分解SVG過濾器:
這個svg的存在僅僅是為了包含過濾器，它實際上并不用于顯示任何東西，所以我們將它的維度歸零(理想情況下，還可以用position: absolute在CSS中將其從流中取出)；當它是內聯的時，它不需要其他屬性(如果您想將它移動到外部文件，您必須添加xmlns = ' http://www . w3 . org/2000/SVG ')
顯然，過濾器需要一個id來引用，但默認情況下，過濾器效果還會在它所應用的元素之外向每個方向溢出10%(x和y的默認值為-10%，寬度和高度的默認值為120%)，因此我們希望將其限制為元素的區域，沿兩個軸從0%到100%(或者，如果您不想設置所有這些屬性，我猜您可以在CSS中設置clip-path: inset(0 );請注意，overflow: hidden不會剪切它，因為它只會隱藏溢出到填充框之外的元素內容，而不會隱藏實際元素的圖形效果，例如由過濾器產生的效果)
第一濾波器圖元創建噪聲層；我真的不明白這是怎么回事——有一篇文章被很多人推薦，但是一旦它從1D到2D，我就失去了它；我注意到的是，最好從默認類型值(湍流)切換到fractalNoise，基頻值越小，噪聲的粒度越細(另外，不要使用整數——使用7.01，而不是7)
第二個濾鏡圖元完全去飽和其輸入(相當于灰度(1)或飽和(0)的效果)；由于我們沒有明確指定輸入，它默認使用之前的過濾器原語的結果——噪聲層；為此，它從feColorMatrix(矩陣)的默認類型切換到飽和，并將值設置為0(如果你對HSL模型/雙錐形有很好的印象，你會知道0%的飽和度意味著我們總是有一個灰色；有多亮或多暗，這取決于亮度，即& quotHSL & quot)
第三個也是最后一個濾波器圖元將去飽和噪聲與應用濾波器的元素混合；feBlend接受兩個輸入，其中一個設置為“SourceGraphic”(注意這些大寫字母很重要！)，而另一個默認使用前一個filter原語的結果；最后，我們使用的模式是乘法(將兩層的% RGB值逐像素相乘)
這就是過濾器所需要的。里面沒有你不需要的東西。
很多時候，SVG生成器會吐出很多不必要的屬性，但這是手寫的，我只包含了跨瀏覽器工作真正需要的內容。
雖然這不算真正的噪聲，但一個純粹的CSS3方法會使用多個重復的線性背景選擇器，它們通常用在模式生成器中。
這里有幾個例子:
http://jsfiddle.net/andrewodri/eMB6E/ http://lea . verou . me/2010/12/checked-stripes-other-background-patterns-with-css3-gradients/ http://lea.verou.me/css3patterns/ 通過背景、角度、色標和透明度的適當組合，應該可以獲得合理的類似噪聲的效果:)
不管怎樣，希望這能讓你找到正確的方向...
是的，目前沒有基于CSS的方法來處理噪波紋理。但是，如果您執意采用編程(而不是基于圖像)的方法，您可以嘗試使用HTML5 canvas。這里有一個關于如何使用JavaScript生成噪聲的教程->在HTML5畫布中創建噪聲
然而，使用Canvas方法會給你的訪問者帶來慢得多的體驗，因為A) JavaScript是一種解釋型語言，B)使用JS編寫圖形特別慢。
所以，除非你想通過使用HTML5來表達觀點，否則我會堅持使用圖片。它會更快(對你和你的用戶來說都是如此)，而且你可以更好地控制外觀。
基于Clint Pachl的回答，我使用CSS的mix-blend-mode來獲得一個顆粒效果，并有選擇地突出構成漸變的顏色。
參見https://jsfiddle.net/jimmmy/2ytzh30w/的示例代碼。
更新:我在CSS中寫了一篇關于它的文章——技巧:粒狀漸變
僅僅使用CSS生成噪波紋理是不可能的(即使可能，也需要大量的代碼技巧來實現)。沒有任何新的CSS3屬性提供開箱即用的效果。一個更快的解決方案是使用圖形編輯器，如Photoshop。