CSS 你能在 CSS3 渐变中添加噪音吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4011113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you add noise to a CSS3 gradient?
提问by austin
Is it possible to add noise to a gradient in CSS?
是否可以在 CSS 中为渐变添加噪声？
Here is my code for a radial gradient:
这是我的径向渐变代码：
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));
}
What would I add to that to have noise on top of it, to give it texture?
我会添加什么来在它上面添加噪音，给它纹理？
采纳答案by Ben Rowe
There's no current way in css to add 'noise' to a background.
css 中目前没有向背景添加“噪音”的方法。
An alternative solution would be to create a transparent noise png in your graphic editor. Then apply that graphic as a background to a <div>. You would then need to place that <div>over the entire area of the <body>which should then give an appearance of a gradient with noise.
另一种解决方案是在图形编辑器中创建透明噪声 png。然后将该图形作为背景应用到<div>. 然后，您需要将其放置<div>在 的整个区域上<body>，然后应该会产生带有噪声的渐变外观。
回答by tim.baker
This is by far the most hassle free and best way to implement this. It is purely CSS and very very simple to do, no extra files - nothing. Ok, it's not the best way possible, but it works very well, very reliable (never failed when testing across very old browsers) and very fast to load.
这是迄今为止实现这一点的最轻松和最佳的方式。它纯粹是 CSS 并且非常非常简单，没有额外的文件 - 什么都没有。好吧，这不是最好的方法，但它工作得非常好，非常可靠（在非常旧的浏览器上测试时从未失败）并且加载速度非常快。
Found it a few months ago, and used it ever since, simply copy and paste this code in to your CSS.
几个月前发现它，从那时起就使用它，只需将此代码复制并粘贴到您的 CSS 中即可。
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
Then add your background color
然后添加你的背景颜色
background-color:#0094d0;
Demo: JSFiddle
演示：JSFiddle
Source: https://coderwall.com/p/m-uwvg
回答by Clint Pachl
Creating Textures (Noise) Using SVG Filters & CSS Gradients
使用 SVG 过滤器和 CSS 渐变创建纹理（噪声）
You want noise in your gradient? You're in luck!
你想要渐变中的噪音吗？你很幸运！
Perlin noiseis a type of gradient noise. The SVG standard specifies a filter primitive called <feTurbulence>, which implements the Perlin function. It allows the synthesis of artificial textures like clouds or marble—the noise you want.
柏林噪声是一种梯度噪声。SVG 标准指定了一个名为 的过滤器原语<feTurbulence>，它实现了 Perlin 函数。它允许合成云或大理石等人造纹理——你想要的噪音。
Step 1: Define an SVG Graphic
步骤 1：定义 SVG 图形
Create a small SVG file called noise.svg.
创建一个名为 .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>
This graphic defines two rectangles. The first is filled with a solid color. The second is translucent with the noise filter applied. The second rectangle is overlayed on the first to provide a noise effect.
该图形定义了两个矩形。第一个填充了纯色。第二个是半透明的，应用了噪声过滤器。第二个矩形叠加在第一个矩形上以提供噪声效果。
SVG Options
SVG 选项
Fist and most obvious is that you can change the dimensions of the graphic. However, the CSS
background-repeatproperty can be used to fill an element, thus 300×300 should suffice.The filter's
typeattribute can befractalNoiseorturbulence, which specifies the filter function. Both provide a different visual, but in my opinion, the noise filter is a little more subtle.The filter's
baseFrequencyattribute can range from 0.5–0.9 to provide a course to fine texture, respectively. This range is visually optimal for either filter in my opinion.The first rectangle's
fillcan be changed to provide a different base color. Later, however, we essentially combine this color with a translucent CSS gradient, which also defines a color(s). So white is a good starting point here.The second rectangle's
opacitycan range from 0.2–0.9 to set the filter intensity, where a higher number increases the intensity.
拳头和最明显的是你可以改变图形的尺寸。但是，CSS
background-repeat属性可用于填充元素，因此 300×300 就足够了。过滤器的
type属性可以是fractalNoise或turbulence，它指定过滤器功能。两者都提供了不同的视觉效果，但在我看来，噪声过滤器更微妙一些。过滤器的
baseFrequency属性范围可以从 0.5-0.9，分别提供精细纹理的过程。在我看来，这个范围对于任一过滤器来说都是视觉上最佳的。fill可以更改第一个矩形以提供不同的基色。然而，稍后，我们基本上将这种颜色与半透明的 CSS 渐变结合起来，后者也定义了一种颜色。所以白色是一个很好的起点。第二个矩形的
opacity范围为 0.2–0.9 以设置过滤器强度，其中较高的数字会增加强度。
At this point, you could tweak the aforementioned options, set this noise graphic as a background image via CSS, and call it a day. But if you want a gradient, like the OP, go to Step 2.
此时，您可以调整上述选项，通过 CSS 将此噪声图形设置为背景图像，然后收工。但是如果你想要一个渐变，比如 OP，请转到第 2 步。
Step 2: Apply a CSS Gradient
第 2 步：应用 CSS 渐变
Using the background-imageproperty, you can set the SVG noise graphic as the background on any element and overlay a gradient. In this example, I'll apply the noise graphic to the entire body and overlay a linear gradient.
使用该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');
}
The linear-gradient()function creates a pseudo image, which is stacked on top of noise.svg. The result is a translucent gradient with our noise showing through it.
的线性梯度（）函数创建了一个伪图像，其被堆叠在顶部noise.svg。结果是一个半透明的渐变，我们的噪音通过它显示出来。
CSS Options
CSS 选项
First, and most obvious, is that the defined gradient colors can be changed. However, if you want a solid color without a gradient, make the two end-point colors equal. The benefit is that you can use the same noise graphic with or without a gradient throughout a site or among projects.
Multiple images, created with the
*-gradient()functions, can be overlayed on the noise graphic and more than two color parameters and angles can be specified in a single gradient function to provide all kinds of cool visuals.The opacity of the gradient parameters—i.e. rgba() and hsla()—can be increased to intensify the defined color and reduce the noise level. Again, 0.2–0.9 is an ideal range.
首先，也是最明显的，定义的渐变颜色是可以改变的。但是，如果您想要没有渐变的纯色，请使两个端点颜色相等。好处是您可以在整个站点或项目之间使用带有或不带有渐变的相同噪声图形。
使用
*-gradient()函数创建的多个图像可以叠加在噪声图形上，并且可以在单个渐变函数中指定两个以上的颜色参数和角度，以提供各种酷炫的视觉效果。可以增加渐变参数的不透明度（即 rgba() 和 hsla()）以增强定义的颜色并降低噪声水平。同样，0.2-0.9 是一个理想的范围。
Conclusion
结论
This is a highly customizable and very light-weight (~400 bytes) solution that allows you to simply define noise of any color or gradient. Although there are several knobs to turn here, this is only the beginning. There are other SVG filter primitives, such as <feGaussianBlur>and <feColorMatrix>, which can provide additional results.
这是一个高度可定制且非常轻量级（~400 字节）的解决方案，允许您简单地定义任何颜色或渐变的噪声。虽然这里有几个旋钮可以转动，但这只是开始。还有其他 SVG 过滤器基元，例如<feGaussianBlur>和<feColorMatrix>，它们可以提供额外的结果。
回答by fanfare
For the sake of novelty, here is some pure CSS noise without using a data URI (although it seems to only work in webkit):
为了新颖，这里有一些不使用数据 URI 的纯 CSS 噪声（虽然它似乎只适用于 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;
}<div id="box"></div>回答by derrylwc
Yes, there's currently no CSS-based approach for noise textures. If you're hell-bent on a programmatic (rather than image-based) approach, though, you could try using HTML5 canvas. There's a tutorial here on how to generate noise using JavaScript --> Creating Noise in HTML5 Canvas
是的，目前没有基于 CSS 的噪声纹理方法。但是，如果您非常喜欢程序化（而不是基于图像的）方法，则可以尝试使用 HTML5 画布。这里有一个关于如何使用 JavaScript 生成噪声的教程 -->在 HTML5 Canvas 中创建噪声
However, doing the Canvas approach will result in a much slower experience for your visitors, because A) JavaScript is an interpreted language, and B) writing graphics using JS is extra slow.
但是，使用 Canvas 方法会导致访问者的体验变慢，因为 A) JavaScript 是一种解释性语言，B) 使用 JS 编写图形特别慢。
So, unless you're trying to make a point by using HTML5, I'd stick with an image. It'll be faster (for you to make and for your users to load), and you'll have a finer degree of control over the appearance.
所以，除非你想通过使用 HTML5 来表达观点，否则我会坚持使用图片。它会更快（让您制作并让您的用户加载），并且您可以更好地控制外观。
回答by Andrew Odri
While this doesn't qualify as true noise, a pure CSS3 approach would be using multiple repeating-linear-background selectors, which are often used in pattern generators.
虽然这不符合真正的噪音，但纯 CSS3 方法将使用多个重复线性背景选择器，这些选择器通常用于模式生成器。
Here are a few examples:
这里有一些例子：
- http://jsfiddle.net/andrewodri/eMB6E/
- http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
- http://lea.verou.me/css3patterns/
- http://jsfiddle.net/andrewodri/eMB6E/
- http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
- http://lea.verou.me/css3patterns/
With some right combination of backgrounds, angles, color stops, and transparency, a reasonable noise-like effect should be achievable :)
通过背景、角度、色标和透明度的正确组合，应该可以实现合理的类噪声效果:)
Hope that sets you in the right direction anyways...
希望无论如何都能让你朝着正确的方向前进......
回答by BoltClock
It is not possible (even if it was, it'd take a crapton of code tricks to do so) to generate noise textures using CSS alone. There aren't any new CSS3 properties that provide that sort of effect out of the box. A much quicker solution is to use a graphic editor such as Photoshop to do that.
单独使用 CSS 生成噪声纹理是不可能的（即使是这样，也需要大量的代码技巧才能这样做）。没有任何新的 CSS3 属性可以提供这种开箱即用的效果。一个更快的解决方案是使用图形编辑器（例如 Photoshop）来执行此操作。
回答by dgknca
I found a way without any image with radial-gradientand only one div.
我找到了一种没有任何图像radial-gradient且只有一个div.
Firstly I want to show an example with radial-gradient. Let's say we want to create a circle at coordinates we want. First circle is x=120y=80, second circle is x=20y=20. To better understand the function we will write below, we can consider this example.
首先，我想展示一个带有径向渐变的示例。假设我们想在我们想要的坐标处创建一个圆。第一个圆圈是x=120y=80，第二个圆圈是x=20y=20。为了更好地理解我们将在下面编写的函数，我们可以考虑这个例子。
.a {
border:1px solid blue;
width:500px;
height:200px;
background: radial-gradient(circle at 120px 80px, red 0px 10px, transparent 10px 100px);
}
.b {
border:1px solid red;
width:500px;
height:200px;
background: radial-gradient(circle at 20px 20px, blue 0px 10px, transparent 10px 100px);
}<div class="a"></div>
<div class="b"></div>We are going to write a @mixin function for thousands line gradients.
我们将为数千行梯度编写一个@mixin 函数。
A SCSS function:
一个 SCSS 函数：
@mixin gradient($color, $width, $height, $noiseCount) {
$value: ();
@for $i from 1 through $noiseCount {
$gradient: radial-gradient(
circle at #{random($width)}px #{random($height)}px,
$color 0px,
$color 1px,
transparent 1px,
transparent 100%
);
$value: append($value, $gradient, comma);
}
background: $value;
}
Usage:
用法：
div {
width:400px;
height: 150px;
@include gradient(#ffad3e, 400, 150, 2500);
}
If we want to create noises according to % value?
如果我们想根据 % 值创建噪音？
We can use this function for this.
我们可以为此使用此功能。
@mixin gradient($color, $width, $height, $noiseCount) {
$value: ();
@for $i from 1 through $noiseCount {
$gradient: radial-gradient(
circle at #{(random($width * 10)) / 10}% #{random($height)}px,
$color 0px,
$color 1px,
transparent 1px,
transparent 100%
);
$value: append($value, $gradient, comma);
}
background: $value;
}
div {
width:100%;
height: 150px;
@include gradient(#ffad3e, 100, 150, 2500);
}
