将div与图像边框对齐

Question

我想问一下是否可以在两张图片之间创建'过渡'，如下所示： 使用css / javascript？

顶部的东西是div的内容和背景图片（沙子/水），我底部还有一些其他div（也有一些内容和背景图片），需要使用'wave'进行分割（这是.png文件）。

我试图做的事情是使用'wave'作为边框图像，这显然不起作用。我发现我可能不得不使用像http://bennettfeely.com/clippy/这样的工具来为顶部和底部div创建一些形状，但这需要花费很多时间并且可能没有响应。

提前致谢。

Answer 1

是的，这是可能的。您只需使用 multiple background stacking 。

e.g。

background: url('images/wave.png') no-repeat center, url('images/beach.jpg') no-repeat center center/cover;

wave png文件必须具有半透明度，以便显示其下方的海滩。

  

编辑： OP问题的目的是剪切图像，使其仅占用波浪区域。通过clip-path的使用，这是可以实现的。有关此内容的更多信息，请访问 CSS Tricks.