推荐用 background-blend-mode 混合纯色层与纹理层实现带纹理按钮，确保单条 background 声明、纹理 no-repeat 并设 background-size，优先选用小尺寸 SVG 或 CSS 渐变纹理。
按钮背景纹理用 background-image 还是 mask？
直接用 background-image 叠加纹理图（比如噪点 PNG 或 SVG）最简单，但控制力弱——纹理会随按钮尺寸拉伸变形，且无法和按钮颜色动态联动。真要“带纹理的按钮”，推荐用 background-blend-mode 混合纯色层 + 纹理层，这样颜色可改、纹理可缩放、响应式也稳。
关键前提是：两层背景必须同属一个 background 声明，且纹理层需设为 no-repeat 并用 background-size 控制密度，否则默认平铺会糊成一片。
- 纹理图建议用小尺寸 SVG（
16x16或32x32），体积小、缩放无损 - 避免用 JPG/PNG 做纹理——压缩伪影在重复平铺时会被放大
-
background-blend-mode: overlay或multiply最常用，前者提亮暗部保留高光，后者加深整体，选哪个取决于主色明度
background-blend-mode 在按钮上失效的常见原因
最常见的不是写错属性名，而是背景层“没凑齐”：混和模式只对同一 background 声明里的多层生效，如果把颜色和纹理拆成两个独立声明（比如先写 background-color，再写 background-image），混和就完全不触发。
正确写法必须是单条 background，用逗号分隔多层：
立即学习“前端免费学习笔记（深入）”；
button {
background: #4a6fa5, url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h16v16H0z' fill='%23000' opacity='0.03'/%3E%3C/svg%3E");
background-blend-mode: overlay;
background-size: 16px 16px;
background-repeat: repeat;
}
- 注意 SVG 中的
%23000是#000的 URL 编码，不编码会导致解析失败 - 如果按钮有
border-radius，纹理层可能在圆角处被裁切——这是正常渲染行为，不是 bug - Safari 15.4+ 才完整支持
background-blend-mode在button元素上，旧版需加appearance: none释放样式控制权
不用图片，纯 CSS 生成纹理（如噪点、斜线）
想彻底摆脱外部资源？可以用 repeating-linear-gradient 或 radial-gradient 拼出基础纹理。例如斜线纹：
button {
background: #5d8aa8,
repeating-linear-gradient(
-45deg,
transparent,
transparent 2px,
rgba(0,0,0,0.05) 2px,
rgba(0,0,0,0.05) 4px
);
background-blend-mode: multiply;
background-size: 100% 100%, 4px 4px;
}
这种写法性能好、可维护性强，但复杂纹理（如木纹、纸浆感）仍需 SVG 或 Canvas 生成。
- 斜线角度用
-45deg而非45deg，避免在不同方向按钮上出现视觉倒置 - 第二层渐变的
background-size必须显式设置，否则默认撑满整个按钮，失去“纹理感” - 用
rgba(0,0,0,0.05)而非hsla()，确保混和时灰度稳定，避免色相偏移
深色模式下纹理按钮颜色反差不足
纹理本身是中性灰度，当按钮主色从浅蓝切到深灰时，overlay 模式可能让纹理“消失”。别硬调 opacity——那会同时削弱主色饱和度。更可靠的做法是给纹理层单独配色：
- 深色模式下，把纹理的
fill或渐变中的rgba改为更浅的灰（如rgba(255,255,255,0.08)） - 或换用
screen混和模式，它在暗背景下提亮效果比overlay更明显 - 检测方式别依赖
@media (prefers-color-scheme: dark)——用户可能手动切换主题，建议结合 CSS 自定义属性动态更新
真正难的不是做出纹理，而是让纹理在各种背景色、缩放比例、设备像素比下都保持可辨识的质感。多数人卡在第二层背景的 background-size 和 background-repeat 搭配上，调一次不如画个草图算清楚格子密度。
