在与CSS的图像背景的波浪效果 [英] 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;
}

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

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

推荐答案

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

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>

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