Wavy effect over an image background with css

问题

I want to make that wave effect over a parallax background image. So far I have the parallax effect and full-width (over parent container width).

section.parallax {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    background-image: url(../images/parallax.jpg); // this image
    height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

What can I do to have that wave effect on the image top and bottom with CSS? Is it possible?

回答1:

Here is an idea using SVG and multiple background. Simply adjust the path of the SVG to fit your needs:

.container {
  width: 500px;
  height: 400px;
  background: 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><path d="M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z"  fill="white" stroke="rgba(255,255,255,0.5)" stroke-width="5"/></svg>') bottom,  
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><path d="M0 10 C30 20 38 2  64 10 L64 0  L0 0 Z"  fill="white" stroke="rgba(255,255,255,0.5)" stroke-width="5"/></svg>') top, 
   url(https://picsum.photos/2000/1000?image=1069) center/cover;
}

<div class="container">

</div>

来源：https://stackoverflow.com/questions/51686450/wavy-effect-over-an-image-background-with-css