如何用CSS实现图片中的波纹背景？是否应使用截图填充？

一、直接使用图片作为背景 #

这种方式最直接省心，完全还原原图效果，代码也简单：

.target-element {
  background-image: url('你的图片地址');
  background-repeat: repeat; /* 平铺填充容器 */
  background-size: cover; /* 也可根据需求用contain或固定尺寸 */
}

优势：还原度100%，无需调试复杂样式；劣势：无法灵活调整颜色、波纹大小，且会增加一次图片请求。

二、纯CSS模拟波纹效果 #

可以通过多层径向渐变叠加，模拟类似的半透明波纹质感，示例代码如下：

.ripple-background {
  width: 100%;
  height: 100vh;
  background-color: #e0f7fa; /* 基础底色 */
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.2) 0%, transparent 40%),
    radial-gradient(circle at 40% 80%, rgba(178,223,219,0.2) 0%, transparent 60%),
    radial-gradient(circle at 60% 20%, rgba(178,223,219,0.3) 0%, transparent 50%);
  background-size: 200px 200px;
}

你可以自行调整渐变的位置、透明度、尺寸和颜色参数，尽可能贴近原图效果。优势：加载速度快，可灵活修改样式适配不同场景；劣势：很难做到和原图完全一致，需要反复调试。

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