在Dribbble或Behance上瀏覽，你會發現設計師們使用一種簡單的技巧為圖像添加紋理：噪點。添加噪點使原本純色或平滑的漸變（例如陰影）更逼真。但儘管設計師們喜歡紋理，噪點卻很少用於網頁設計。
本文將僅使用少量CSS和SVG生成彩色噪點，為漸變添加紋理。好了，讓我們製造一些噪點吧！
點擊此處查看。理解正在發生的事情的最快方法是調整構成圖層的參數。
本文的核心技術建立在Chris Pachl對Stack Overflow問題的回答之上：你能為CSS漸變添加噪點嗎？
技巧是使用SVG濾鏡創建噪點，然後將該噪點作為背景應用。將其放置在漸變下方，增強亮度和對比度，就是這樣——你得到了一個逐漸分散的漸變。
以下是我們在幕後使用的內容：
讓我們詳細介紹這些部分中的每一個。
在SVG領域，我們可以定義濾鏡，其中一個濾鏡允許我們創建Perlin噪點。它被稱為<feturbulence></feturbulence>，我們可以定義屬性，例如它是“turbulence”還是“noise”，以及它有多精細或粗糙。 Bence Szabó更詳細地解釋了這一點，因為他演示瞭如何使用它來創建圖案。
<code><svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feturbulence basefrequency="0.65" numoctaves="3" stitchtiles="stitch" type="fractalNoise"></feturbulence></filter><rect filter="url(#noiseFilter)" height="100%" width="100%"></rect></svg></code>
此SVG示例創建一個濾鏡並呈現一個<rect></rect>元素，我們可以將其用於我們的顆粒狀漸變。請注意，SVG<filter></filter>與<rect></rect>分開定義，而<rect></rect>只是引用它。
嘗試更改<feturbulence></feturbulence>的一些屬性。
我們將此SVG另存為單獨的文件。我們在本文中的演示中引用外部鏈接來獲取SVG。但是，在實踐中，您將引用本地文件或您自己的CDN。由於某些奇怪的原因，通過其ID在CSS中引用SVG不起作用，但您可以內聯SVG，如我們在遊樂場演示中所示。出於易讀性原因，我們在演示中不這樣做。
在將SVG文件存儲在某個可以按URL或路徑引用它的位置後，我們現在可以在CSS背景中使用它，並結合漸變。
<code>.noise { /* ... */ background: linear-gradient(to right, blue, transparent), url(https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560); }</code>這裡的順序很重要。在這個特定示例中，我們希望純色（即無噪點）過渡到噪點，然後過渡到另一種顏色。我們還希望漸變的一端是透明的，以便噪點透出來。
像這樣：
但是，這並不是特別好，因為噪點太混亂了。我們需要將其弄亂並使其更粗糙。我們可以通過……
添加CSS濾鏡使噪點更加鮮明，將最暗淡的顏色推向白色或黑色。濾鏡應用於整個<div>，因此最左邊的藍色與我們開始使用的純藍色不同。 ``` .noise { / <em>...</em> / background: linear-gradient(to right, blue, transparent), url( <a href="https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560">https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560</a> ); filter: contrast(170%) brightness(1000%);<br> }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>您可以随意调整对比度和亮度如何影响渐变。增强亮度和对比度会在下面的演示中突出混乱的灰色。 #### 噪点颜色不均匀如果您放大，您会注意到噪点由多种颜色组成。SVG滤镜一开始就是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用CSS混合（即mix-blend-mode和background-blend-mode）过滤颜色。 #### CSS混合让我们创建一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`</code> `，將其放置在原始漸變之上，然後應用`mix-blend-mode: multiply;`來使事物平滑。</pre><div class="contentsignin">登入後複製</div></div>
</div>
<p></p>
<div>
<div></div>
<div></div>
</div>
<code></code>
.noise { / ... / background: linear-gradient(20deg, rebeccapurple, transparent), url( https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560 ); contrast(170%) brightness(1000%); } .overlay { / ... / background: moccasin; mix-blend-mode: multiply; }
<code>我们可以使用CSS隔离属性创建一个新的堆叠上下文并选择要混合的内容。如果我们在下一个示例中省略隔离，渐变和叠加层将与背景颜色混合。在Pen中尝试并注释掉该行！</code>
/ Same as before /
.isolate { isolation: isolate; / ... / }
<code>### 一些用例我们已经查看了一个如何制作噪点渐变的非常简单的示例，但是您可以在哪里使用它呢？让我们考虑几个用例。 #### 光线和阴影，带颗粒感渐变自然发生在哪里？例如，光线和阴影。我们可以利用CSS属性`mix-blend-mode`来平滑地混合渐变并选择性地过滤我们想要在噪点中看到的颜色。在“阴影”示例中，我们创建一个暗渐变，并将其反转以在“光线”示例中创建效果。在这两种情况下，`mix-blend-mode`都允许我们将它与其他渐变混合。 #### 全息箔大幅度的亮度和对比度增强创造了一种彩虹效果，让人联想起全息箔。 ### 进一步发展尝试游乐场并随意调整不同的参数，看看它们如何影响纹理。除此之外，以下是一些继续摆弄此技术的几种方法： - **使用不同的SVG:** 本文中的所有渐变都使用相同的SVG，但您可以调整生成噪点的参数以调整粗糙度以及游乐场中的外观和感觉。 - **尝试不同的渐变:** 除了`linear-gradient`之外，CSS还提供四种类型的渐变。你能说出它们的名字吗？（这是一个。） - **添加更多图层:** 使用CSS混合，您可以根据需要堆叠任意数量的图层并将它们混合在一起。 - **应用不同的SVG滤镜:** 有各种各样的滤镜，包括高斯模糊和不同类型的照明。此外，它们可以在CSS滤镜中引用并应用于除SVG之外的*任何*元素。您还能想到什么？请在评论中告诉我们您的发现。 ### 浏览器支持我们不能避免在这里谈论浏览器支持。此技术的核心受所有现代浏览器支持。正如您可能预期的那样，它在Internet Explorer中不起作用。也就是说，Internet Explorer确实支持SVG作为CSS中的背景（只是不支持实际的CSS滤镜属性）。 #### SVG作为CSS背景图像此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。 #### 桌面</code><thead><tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr></thead><tbody><tr> <td title="Chrome -"></td> <td title="Firefox -"></td> <td title="IE -"></td> <td title="Edge -"></td> <td title="Safari -"></td> </tr></tbody> #### 移動/平板電腦
以上是粒狀梯度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
