我想在视差背景图像上制作波浪效果。
到目前为止，我有视差效果和全宽度（超过父容器宽度）。
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 在图像顶部和底部产生波浪效果？是否可以？
这是一个使用 SVG 和多个背景的想法。只需调整pathSVG 以满足您的需求：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
