如何在CSS中创建线性渐变背景搭配波点纹理？

要实现线性渐变搭配波点纹理的叠加效果，核心是利用CSS的多层背景特性——通过逗号分隔多个背景层，上层背景会叠加在下层之上。以下是合并后的完整代码及关键调整说明：

合并后的CSS代码 #

body {
  background: 
    /* 上层：波点纹理（两个径向渐变） */
    radial-gradient(#7c7c50 0.95px, transparent 0.95px), 
    radial-gradient(#7c7c50 0.95px, transparent 0.95px),
    /* 下层：线性渐变背景 */
    linear-gradient(to right, red, yellow);
  /* 波点的尺寸与定位设置 */
  background-size: 38px 38px;
  background-position: 0 0, 19px 19px;
}

关键调整说明 #

• 背景层顺序：把波点纹理的径向渐变放在线性渐变前面，这样波点会叠加在渐变背景之上（CSS背景遵循「先写的在上层，后写的在下层」的规则）。
• 透明化波点底色：将原波点代码中的#94fcc8替换为transparent，让底层的线性渐变能透过波点的空白区域显示出来。
• 简化数值：原代码里的0.9500000000000001px是浮点精度问题导致的冗余值，直接简化为0.95px即可，视觉效果完全一致。
• 移除冗余属性：不需要单独设置background-color和opacity，线性渐变已经作为最底层背景提供底色，波点的透明度通过transparent控制即可。

如果想要波点呈现半透明效果，可将波点颜色改为带透明度的RGBA值，比如：

radial-gradient(rgba(124, 124, 80, 0.7) 0.95px, transparent 0.95px)

内容的提问来源于stack exchange，提问作者Sam Min Wong