背景中的 CSS 3 或 svg 波浪 [英] CSS 3 or svg wave in a background

问题描述

如何在透明图像背景上构建波浪?

How can I build a wave on a transparent image background ?

布局-图像:

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

I need the wave in the white top background.

推荐答案

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

I slightly improved version of akshay's answer. This includes two separate options.

选项 1

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

If aspect ratio doesn't have to be preserved, then the curve will change with width.

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 元素的高度和宽度使用相同的单位值.

If the aspect ratio has to be preserved, then we have to use same units value for height and width of svg element.

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 属性的值.
另外，我使用了绝对路径命令，因为它们更易于编辑.

See here I used width and height both as 100%. To change the colour you have to change the value of fill attribute.
Also, I have used absolute path commands as they are simpler to edit.

说明

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

M - command moves the drawing point to the the coordinates specified after it, or 0,5 (SVG coordinate system)

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

H draws Horizontal line to specified X-coordinate from the current point (0,5)

C 绘制三次贝塞尔曲线，第一个点坐标为第一个手柄，第二个为第二个手柄，第三个为终点.

C draws cubic bezier, with first point coords as first handle, second second handle, and third is the end point.

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

S draws a cubic bezier, but its first handle is the reflection of the last handle of last C command about the end point of last C.

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

V draws vertical line to specified Y-coordinate.

Z关闭路径，即从当前点到最后一个M点画一条直线.

Z closes the path, ie draws a straight line from current point to last M point.

这篇关于背景中的 CSS 3 或 svg 波浪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！