在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混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`<div>`，将其放置在原始渐变之上，然后应用`mix-blend-mode: multiply;`来使事物平滑。</div>
</code></pre><div class="contentsignin">登录后复制</div></div>
<p></p>
<div>
<div></div>
<div></div>
</div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code></code></pre><div class="contentsignin">登录后复制</div></div>
<p>.noise {
/<em> ... </em>/
background:
linear-gradient(20deg, rebeccapurple, transparent),
url(<a href="https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560">https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560</a>);
contrast(170%) brightness(1000%);
}
.overlay {
/<em> ... </em>/
background: moccasin;
mix-blend-mode: multiply;
}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>
我们可以使用CSS隔离属性创建一个新的堆叠上下文并选择要混合的内容。如果我们在下一个示例中省略隔离，渐变和叠加层将与背景颜色混合。在Pen中尝试并注释掉该行！
</code></pre><div class="contentsignin">登录后复制</div></div>
<p>/<em> Same as before </em>/</p>
<p>.isolate {
isolation: isolate;
/<em> ... </em>/
}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
#### 桌面
<table>
<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>
</table>
#### 移动/平板电脑
<table>
<thead><tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr></thead>
<tbody><tr>
<td title="Android Chrome - "></td>
<td title="Android Firefox - "></td>
<td title="Android - "></td>
<td title="iOS Safari - "></td>
</tr></tbody>
</table>
#### CSS滤镜效果
此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
#### 桌面
<table>
<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>
</table>
#### 移动/平板电脑
<table>
<thead><tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr></thead>
<tbody><tr>
<td title="Android Chrome - "></td>
<td title="Android Firefox - "></td>
<td title="Android - "></td>
<td title="iOS Safari - "></td>
</tr></tbody>
</table>
我还注意到，基于Blink的浏览器（例如Chrome）和基于WebKit的浏览器（例如Safari）对`mix-blend-mode`的实现略有不同，因此如果使用CSS混合，请务必跨浏览器进行测试。在我的项目中，我使用浏览器特定的媒体查询来手动调整CSS的小调整来协调视觉差异。
就是这样！现在您已经掌握了SVG滤镜以及如何将它们与CSS滤镜组合作为背景，您又有了另一种巧妙的视觉效果来为设计添加深度和纹理。</code></pre><div class="contentsignin">登录后复制</div></div>
</div>
以上是粒状梯度的详细内容。更多信息请关注PHP中文网其他相关文章！
