CSS 3或svg wave在后台

Question

如何在透明图像背景上构建波形？

布局图片:

我需要白色顶部背景中的波浪.

Answer 1

我略微改进了akshay的答案版本.这包括两个单独的选项.

选项1

如果不必保留纵横比,则曲线将随宽度而变化.

http://jsfiddle.net/f6n73avk/2/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

方案2

如果必须保留纵横比,那么我们必须对svg元素的高度和宽度使用相同的单位值.

http://jsfiddle.net/o1eghm7v/1/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

看到这里我使用宽度和高度都是100%.要更改颜色,您必须更改fill属性的值.
另外,我使用了绝对路径命令,因为它们更易于编辑.

说明

M - 命令将绘图点移动到其后指定的坐标,或0,5(SVG坐标系)

H从当前点(0,5)绘制水平线到指定的X坐标

C绘制立方贝塞尔曲线,第一个点坐标为第一个手柄,第二个第二个手柄,第三个是终点.

S绘制一个三次贝塞尔曲线,但它的第一个句柄是最后一个C命令的最后一个句柄关于最后一个C的终点的反映.

V将垂直线绘制到指定的Y坐标.

Z关闭路径,即从当前点到最后M点绘制一条直线.