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

问题描述 投票：45回答：7

是否可以在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 css3 gradients
7个回答
22
投票

在css中没有当前的方法来向背景添加“噪音”。

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

63
投票

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

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

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

然后添加背景颜色

background-color:#0094d0;

但是：ぁzxswい

资料来源：JSFiddle

11
投票

为了新颖性，这里有一些纯CSS噪声而不使用数据URI（虽然它似乎只适用于webkit）：

https://coderwall.com/p/m-uwvg
#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;
}
9
投票

Creating Textures (Noise) Using SVG Filters & CSS Gradients

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

<div id="box"></div>是一种渐变噪音。 SVG标准指定了一个名为Perlin noise的过滤器原语，它实现了Perlin函数。它允许合成人造纹理，如云或大理石 - 你想要的噪音。

第1步：定义SVG图形

创建一个名为<feTurbulence>的小型SVG文件。

noise.svg

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

SVG Options

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

此时，您可以调整上述选项，通过CSS将此噪声图形设置为背景图像，并将其称为一天。但是如果你想要一个渐变，比如OP，请转到步骤2。

第2步：应用CSS渐变

使用opacity属性，您可以将SVG噪声图形设置为任何元素的背景并覆盖background-image。在这个例子中，我将噪声图形应用于整个身体并覆盖gradient。

linear gradient

linear-gradient（）函数创建一个伪图像，它堆叠在noise.svg之上。结果是半透明的渐变，我们的噪音通过它显示出来。

CSS Options

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

结论

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

8
投票

是的，目前还没有基于CSS的噪声纹理方法。但是，如果你对程序化（而不是基于图像）的方法很不满意，你可以尝试使用HTML5画布。这里有一个关于如何使用JavaScript生成噪声的教程 - > <feColorMatrix>

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

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

7
投票

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

这里有一些例子：

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

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

2
投票

不可能（即使它是，它需要一些代码技巧的诀窍才能这样做）仅使用CSS生成噪声纹理。没有任何新的CSS3属性可以提供开箱即用的那种效果。一个更快的解决方案是使用Photoshop之类的图形编辑器来做到这一点。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.