如何用CSS实现背景图的两种特效？求名称及实现方案

1. 渐变网格背景（点阵渐变效果） #

这个特效通常被称为 Gradient Dot Grid（渐变点阵网格），核心是通过CSS渐变结合背景重复规则，实现带色彩过渡的点阵背景。

实现代码： #

.dot-gradient-bg {
  width: 100%;
  height: 300px;
  /* 绘制单个圆点 + 叠加底色渐变 */
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 2px, transparent 2px),
                    linear-gradient(to bottom right, #4facfe, #00f2fe, #43e97b);
  /* 控制圆点间距与底色尺寸 */
  background-size: 20px 20px, 100% 100%;
}

• 调整2px可以改变圆点大小，20px控制点阵间距，修改渐变色值可切换色彩风格。

2. 噪点纹理背景（颗粒杂色效果） #

这个特效叫做 Noise Texture Background（噪点纹理背景），纯CSS可以通过滤镜或内联SVG两种方式实现。

方法1：滤镜+伪元素实现 #

.grainy-bg {
  width: 100%;
  height: 300px;
  background-color: #e0f7fa;
  position: relative;
  overflow: hidden;
}

.grainy-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 生成噪点并调整对比度/亮度 */
  filter: contrast(1.2) brightness(1.1) noise(0.5);
  background-image: linear-gradient(45deg, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none; /* 不干扰页面交互 */
}

方法2：内联SVG背景实现（更稳定） #

.grainy-bg-alt {
  width: 100%;
  height: 300px;
  background-color: #e0f7fa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
}

• 调整noise()参数或SVG中的baseFrequency，可改变噪点的密度与颗粒大小。

内容的提问来源于stack exchange，提问作者BentoumiTech