你能为CSS3渐变添加噪音吗？

Question

你能为CSS3渐变添加噪音吗？

是否可以在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));
}

Run Code Online (Sandbox Code Playgroud)

我会添加什么来在它上面产生噪音,给它纹理？

Answer 1

tim*_*ker 68

这是迄今为止最轻松,最实现这一目标的方法.它纯粹是CSS,非常简单,没有额外的文件 - 没有.好吧,这不是最好的方法,但它运行良好,非常可靠(在非常老的浏览器上测试时从未失败)并且加载速度非常快.

几个月前发现它,并从那时起使用它,只需将此代码复制并粘贴到您的CSS中即可.

background-image: url(data:image/png;base64,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);

Run Code Online (Sandbox Code Playgroud)

然后添加背景颜色

background-color:#0094d0;

Run Code Online (Sandbox Code Playgroud)

演示:JSFiddle

资料来源:https: //coderwall.com/p/m-uwvg

现在(2013年)比所有其他答案更正确. (2认同)
@corysimmons那是不对的.要将它与渐变一起使用,只需在相同的`background-image`属性中附加逗号和渐变即可. (2认同)

Answer 2

Ben*_*owe 22

在css中没有当前的方法来向背景添加"噪音".

另一种解决方案是在图形编辑器中创建透明噪声png.然后将该图形作为背景应用于<div>.然后,您需要将其放置<div>在整个区域上<body>,然后应该出现带有噪声的渐变.

或者使用多个背景图像,最上面的图像是你的噪声PNG.支持渐变的浏览器通常也支持这些. (9认同)
在我看来,叠加噪声看起来并不像真正的噪音那么好.如果使用"乘法"模式混合噪声叠加会更好,但CSS不支持.但是使用具有噪声的梯度的巨大图像的替代方案也不是完美的,因为具有噪声的图像不能很好地压缩... (5认同)

Answer 3

Ana*_*Ana 15

现在是 2023 年，所以这是我的答案：最好的选择是使用轻量级内联 SVG 过滤器和一个 CSS 声明......其中包括背景渐变。没有外部文件，没有任何 base64 编码。另外，它在保留非颗粒渐变方面做得很好，因为它不会扰乱对比度或亮度。

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>

Run Code Online (Sandbox Code Playgroud)

CSS代码如下所示：

background: filter(radial-gradient(circle, red, tan), url(#grainy))

Run Code Online (Sandbox Code Playgroud)

有什么问题吗？

好吧，目前（2023 年 1 月上旬）它还不能真正在任何地方工作，尽管它应该很快就会开始在 Safari 中工作。Safari 是唯一实现该功能的浏览器，它允许我们只在图层上filter()应用 a ，而不影响元素的文本内容或后代。现在，即使在 Safari 中，它也只适用于图像，不过它应该很快也适用于 CSS 渐变filterbackground-imageurl()。

我们仍然可以这样做，并且它可以跨浏览器工作：

background: radial-gradient(circle, mediumturquoise, darkslateblue); filter: url(#grainy)
Run Code Online (Sandbox Code Playgroud)
现场演示

然而，如上所述，这filter会影响其设置的整个元素，包括后代和文本内容。

为了避免这种情况，我们需要将background和filter声明移动到伪、绝对定位的位置，位于其父级内容后面，覆盖其整个父级的区域 -现场演示的区域。

这很容易实现并且是跨浏览器的，但是如果能够支持filter()功能，而不是仅仅为此使用伪代码，并将所需的 CSS 减少到我们现在必须编写的 CSS 的 15% 左右，那就更好了解决方法。

以下是其他浏览器中的错误链接：

铬合金

火狐浏览器

另一件事：如果您真的不需要颗粒度，那么视觉增强只是一个很好的选择，您可以将渐变存储在--grad自定义属性中并具有：

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)) } }
Run Code Online (Sandbox Code Playgroud)

对于任何感兴趣的人，请分解 SVG 过滤器：

thissvg仅存在用于包含，它实际上不会用于显示任何内容，因此我们将其尺寸归零（理想情况下也将其从CSS 中的filter流程中取出）；position: absolute当它是内联时，它不需要其他属性（如果你想将它移动到外部文件，你必须添加xmlns='http://www.w3.org/2000/svg'）

显然需要引用filteran ，但默认情况下，滤镜效果也会在各个方向上溢出（与相关）到它所应用的元素之外（和are的默认值以及for 和are ），因此我们要限制它只是元素的区域，从到沿两个轴（或者，如果您不想设置所有这些属性，我想您可以在 CSS 中设置；请注意，这不会削减它，因为这只会隐藏元素的内容溢出在其之外，但不是实际元素上的图形效果，例如由 a 产生的图形效果）idfeTurbulence10%xy-10%widthheight120%0%100%clip-path: inset(0)overflow: hiddenpadding-boxfilter

第一个滤波器基元创建一个噪声层；我不太明白它是如何工作的——有一篇文章很多人都推荐过，但是一旦它从一维变成了二维，我就迷失了；我注意到，最好从默认type值 ( turbulence) 切换到fractalNoise，并且该值越小baseFrequency，噪声的颗粒度越细（另外，不要使用整数 - 使用7.01，但不使用7）

第二个滤波器基元完全降低其输入的饱和度（相当于grayscale(1)或的效果saturate(0)）；由于我们没有明确指定输入，因此它默认使用前一个过滤基元的结果 - 噪声层；为此，它从默认值 (即 ) 切换type到feColorMatrix并matrix设置saturate为values(0如果您对 HSL模型/双锥体有良好的心理印象，您就会知道饱和度意味着0%我们总是有灰色；有多亮或者有多暗，这取决于亮度，“HSL”中的“L”）

第三个也是最后一个滤波器基元将去饱和噪声与应用滤波器的元素混合；feBlend接受两个输入，其中一个设置为“SourceGraphic”（注意这些大写字母很重要！），而另一个默认使用前一个过滤器基元的结果；最后，mode我们使用的是multiply（这将两层的% RGB 值逐像素相乘）

这就是过滤器所需的全部内容。里面没有你不需要的东西。

很多时候，SVG 生成器会吐出许多不必要的属性，但这是手写的，我只包含了跨浏览器工作真正需要的属性。

Answer 4

fan*_*are 12

为了新颖性,这里有一些纯CSS噪声而不使用数据URI(虽然它似乎只适用于webkit):

#box {
  width:250px;
  height:250px;
  position:relative;
  background-size:55px 10px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%); 
}
#box::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:12px 22px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%),  -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
  left:0;
  z-index:998;
}
#box::after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:15px 13px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
  left:0;
  top:0;
  z-index:999;
}

Run Code Online (Sandbox Code Playgroud)

<div id="box"></div>

Run Code Online (Sandbox Code Playgroud)

这是如何运作的？只是一堆相互相加和相减的渐变？ (2认同)

Answer 5

Cli*_*chl 12

使用SVG过滤器和CSS渐变创建纹理(噪声)

你想要渐变中的噪音吗？你很幸运!

Perlin噪声是一种梯度噪声.SVG标准指定了一个名为的过滤器原语<feTurbulence>,它实现了Perlin功能.它允许合成人造纹理,如云或大理石 - 你想要的噪音.

第1步:定义SVG图形

创建一个名为的小SVG文件noise.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>

Run Code Online (Sandbox Code Playgroud)

此图形定义了两个矩形.第一个是纯色.第二种是半透明的,应用了噪声滤波器.第二个矩形覆盖在第一个矩形上以提供噪声效果.

SVG选项

拳头和最明显的是你可以改变图形的尺寸.但是,CSS background-repeat属性可用于填充元素,因此300×300就足够了.
过滤器的type属性可以是fractalNoise或turbulence,它指定过滤器功能.两者都提供了不同的视觉效果,但在我看来,噪音过滤器更加微妙.
过滤器的baseFrequency属性范围可以是0.5-0.9,以分别提供精细纹理的过程.在我看来,这个范围对于任何一个过滤器都是最佳的.
fill可以更改第一个矩形以提供不同的基色.然而,后来,我们基本上将这种颜色与半透明的CSS渐变相结合,该渐变也定义了一种颜色.所以白色是一个很好的起点.
第二个矩形的opacity范围可以从0.2-0.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');
}

Run Code Online (Sandbox Code Playgroud)

的线性梯度()函数创建了一个伪图像,其被堆叠在顶部noise.svg.结果是半透明的渐变,我们的噪音通过它显示出来.

CSS选项

首先,也是最明显的,可以改变定义的渐变颜色.但是,如果您想要一个没有渐变的纯色,请使两个端点颜色相等.好处是您可以在整个站点或项目中使用相同的噪声图形,有或没有渐变.
使用这些*-gradient()功能创建的多个图像可以叠加在噪声图形上,并且可以在单个渐变功能中指定两个以上的颜色参数和角度,以提供各种酷炫的视觉效果.
可以增加梯度参数的不透明度 - 即rgba()和hsla() - 以增强定义的颜色并降低噪声水平.同样,0.2-0.9是理想的范围.

结论

这是一个高度可定制且非常轻量级(~400字节)的解决方案,允许您简单地定义任何颜色或渐变的噪声.虽然这里有几个旋钮,但这只是一个开始.还有其他SVG过滤器基元,例如<feGaussianBlur>和<feColorMatrix>,可以提供额外的结果.

有关我如何应用此技术来匹配给定梯度的示例，请参阅 [我的答案](/sf/answers/3437790891/) 到 [this question](https://stackoverflow.com/q /27866812/41906）。 (3认同)
您可以链接到演示吗？ (2认同)

Answer 6

der*_*lwc 8

是的,目前还没有基于CSS的噪声纹理方法.但是,如果你对程序化(而不是基于图像)的方法很不满意,你可以尝试使用HTML5画布.这里有一个关于如何使用JavaScript生成噪声的教程 - > 在HTML5 Canvas中创建噪声

但是,使用Canvas方法会导致访问者的体验慢得多,因为A)JavaScript是一种解释性语言,B)使用JS编写图形速度非常慢.

所以,除非你试图通过使用HTML5来表达观点,否则我会坚持使用图像.它会更快(为您制作并为您的用户加载),并且您将对外观有更好的控制.

Answer 7

And*_*dri 7

虽然这不符合真正的噪声,但纯CSS3方法将使用多个重复线性背景选择器,这些选择器通常用于模式生成器.

这里有一些例子:

通过背景,角度,色彩停止和透明度的正确组合,应该可以实现合理的类似噪音的效果:)

希望无论如何都能让你朝着正确的方向前进......

Answer 8

jim*_*ron 7

在 Clint Pachl 的答案的基础上，我使用 CSSmix-blend-mode来获得颗粒感更强的效果，并有选择地增强构成渐变的颜色。

有关示例代码，请参阅https://jsfiddle.net/jimmmy/2ytzh30w/ 。

更新：我在 CSS-Tricks: Grainy Gradients中写了一篇关于它的文章

归档时间：	15 年，1 月前
查看次数：	66314 次
最近记录：	6 年，4 月前