在与CSS的图像背景的波浪效果

Question

我想在视差背景图像上产生波浪效果。 到目前为止，我具有视差效果和全角（超过父容器的宽度）。

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;
}

如何使用CSS在图像的顶部和底部产生波浪效果？有可能吗？

Answer 1

这是使用SVG和多个背景的想法。只需调整SVG的path即可满足您的需求：

.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>