是否可以在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));
}
我会添加什么来在它上面加上噪音，给它纹理？
答案 0 :(得分：63)
这是迄今为止最轻松，最实现这一目标的方法。它纯粹是CSS，非常简单，没有额外的文件 - 没有。好吧，这不是最好的方法，但它运行良好，非常可靠（在非常老的浏览器上测试时从未失败）并且加载速度非常快。
几个月前发现它，并且从那时起就使用它，只需将此代码复制并粘贴到您的CSS中即可。
background-image: url(data:image/png;base64,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);
然后添加背景颜色
background-color:#0094d0;
演示：JSFiddle
答案 1 :(得分：22)
css中没有当前的方法可以向背景添加“噪音”。
另一种解决方案是在图形编辑器中创建透明噪声png。然后将该图形作为背景应用于<div>。然后，您需要将<div>放在<body>的整个区域上，然后应该出现带有噪音的渐变。
答案 2 :(得分：11)
为了新颖性，这里有一些纯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;
}<div id="box"></div>
答案 3 :(得分：9)
你想要渐变中的噪音吗？你很幸运！
Perlin noise是一种渐变噪音。 SVG标准指定了一个名为<feTurbulence>的过滤器原语，它实现了Perlin功能。它允许合成人造纹理，如云或大理石 - 你想要的噪音。
创建一个名为noise.svg的小型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>
此图形定义了两个矩形。第一个是纯色。第二种是半透明的，应用了噪声滤波器。第二个矩形覆盖在第一个矩形上以提供噪声效果。
拳头，最明显的是你可以改变图形的尺寸。但是，CSS background-repeat属性可用于填充元素，因此300×300就足够了。
过滤器的type属性可以是fractalNoise或turbulence，它指定过滤器功能。两者都提供了不同的视觉效果，但在我看来，噪音过滤器更加微妙。
过滤器的baseFrequency属性范围可以从0.5到0.9，以分别提供精细纹理的过程。在我看来，这个范围对于任何一个过滤器都是最佳的。
可以更改第一个矩形的fill以提供不同的基色。然而，后来，我们基本上将这种颜色与半透明的CSS渐变相结合，该渐变也定义了一种颜色。所以白色是一个很好的起点。
第二个矩形的opacity范围可以从0.2到0.9来设置滤镜强度，其中较高的数字会增加强度。
此时，您可以调整上述选项，通过CSS将此噪声图形设置为背景图像，并将其称为一天。但是如果你想要一个渐变，比如OP，请转到步骤2.
使用background-image属性，您可以将SVG噪声图形设置为任何元素的背景，并覆盖gradient。在这个例子中，我将噪声图形应用于整个身体并覆盖linear gradient。
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');
}
linear-gradient（）函数创建一个伪图像，该图像堆叠在 noise.svg 之上。结果是半透明的渐变，我们的噪音通过它显示出来。
首先，最明显的是，可以更改定义的渐变颜色。但是，如果您想要一个没有渐变的纯色，请使两个端点颜色相等。这样做的好处是，您可以在整个站点或项目中使用相同的噪声图形，无论是否有渐变。
使用*-gradient() functions创建的多个图像可以叠加在噪声图形上，并且可以在单个渐变功能中指定两个以上的颜色参数和角度，以提供各种炫酷的视觉效果。 / p>
梯度参数的不透明度 - 即。 rgba（）和hsla（） - 可以增加以增强定义的颜色并降低噪音水平。同样，0.2-0.9是理想的范围。
这是一个高度可定制且非常轻量级（约400字节）的解决方案，允许您简单地定义任何颜色或渐变的噪声。虽然这里有几个旋钮，但这只是一个开始。还有其他SVG过滤器原语，例如<feGaussianBlur>和<feColorMatrix>，可以提供额外的结果。
答案 4 :(得分：8)
是的，目前还没有基于CSS的噪音纹理方法。但是，如果你对程序化（而不是基于图像）的方法很不满意，你可以尝试使用HTML5画布。这里有一个关于如何使用JavaScript生成噪声的教程 - ＆gt; Creating Noise in HTML5 Canvas
但是，使用Canvas方法会给访问者带来更慢的体验，因为A）JavaScript是一种解释性语言，B）使用JS编写图形的速度非常慢。
所以，除非你试图通过使用HTML5来表达观点，否则我会坚持使用图像。它会更快（为您制作并为您的用户加载），并且您可以更好地控制外观。
答案 5 :(得分：7)
虽然这不符合真正的噪声，但纯CSS3方法将使用多个重复线性背景选择器，这些选择器通常用于模式生成器。
以下是一些例子：
通过正确组合背景，角度，色彩停止和透明度，可以实现合理的类似噪音的效果：）
希望无论如何都能让你朝着正确的方向前进......
答案 6 :(得分：2)
单独使用CSS生成噪声纹理是不可能的（即使它是，这需要一些代码技巧）。没有任何新的CSS3属性可以提供开箱即用的那种效果。更快的解决方案是使用Photoshop等图形编辑器来实现这一目标。
答案 7 :(得分：0)
我找到了一种方法，其中没有包含radial-gradient且只有一个div的图像。
首先，我想显示一个径向渐变的示例。假设我们要在所需的坐标处创建一个圆。第一个圆圈为x=120 y=80，第二个圆圈为x=20 y=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>
我们将为数千个线渐变编写一个@mixin函数。
一个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;
}
用法：
div {
width:400px;
height: 150px;
@include gradient(#ffad3e, 400, 150, 2500);
}
是否要根据％值创建噪声？
我们可以为此使用此功能。
@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);
}