能否用CSS实现图片波浪扭曲效果？网站开发技术咨询

当然可以用CSS实现这种波浪效果，结合你已有的代码，这里提供两种实用方案：

方案1：使用CSS clip-path 快速裁剪 #

clip-path 属性可以直接定义图片的显示区域，你可以通过在线工具生成适配的波浪路径，然后应用到图片上：

/* Format coffepic */
img#coffee{
    position: absolute;
    top: 1200px;
    /* 示例波浪裁剪路径，可根据需求调整参数 */
    clip-path: polygon(0 0, 100% 0, 100% 88%, 90% 100%, 80% 88%, 70% 100%, 60% 88%, 50% 100%, 40% 88%, 30% 100%, 20% 88%, 10% 100%, 0 88%);
}

这种方法代码简洁，适合快速实现简单波浪；缺点是波浪形状的精细调整需要手动修改路径参数。

方案2：使用SVG遮罩实现平滑自然的波浪 #

如果需要更细腻、可灵活定制的波浪效果，推荐用SVG遮罩方案：

1. 先在HTML中添加SVG元素（放在图片的父容器内）：

<div class="coffee-wrap">
    <img id="coffee" src="你的图片地址" alt="咖啡">
    <svg class="wave-shape" viewBox="0 0 1200 150" preserveAspectRatio="none">
        <path d="M0,120 Q180,150 360,120 T720,120 T1080,120 T1200,120 V150 H0 Z" fill="#你的背景色块颜色"/>
    </svg>
</div>

2. 调整CSS样式（适配你原有的定位逻辑）：

.coffee-wrap {
    position: relative;
    width: 100%; /* 设为图片的实际宽度 */
}

img#coffee{
    position: absolute;
    top: 1200px;
    width: 100%;
    display: block;
}

.wave-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* 波浪高度，可按需调整 */
}

通过修改SVG路径中的d参数，你可以自由调整波浪的弧度、数量和平滑度，兼容性也更好。

注意：如果图片使用绝对定位，务必给父容器设置position: relative，避免图片脱离正常布局流后出现位置错乱。

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