javascript - 将 div 与图像边框对齐

Question

我想问问是否可以像这样在两个图像之间创建“过渡”:使用 css/javascript？

顶部的东西是一个带有内容和背景图像(沙子/水)的 div，底部还有一些其他的 div(也有一些内容和背景图像)需要使用那个“波浪”(这是 .png 文件)。

我尝试做的事情是使用“wave”作为边框图像，这显然不起作用。我发现我可能必须使用像 http://bennettfeely.com/clippy/ 这样的工具为顶部和底部 div 创建一些形状，但这将花费大量时间并且可能没有响应。

提前致谢。

Answer 1

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

例如

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

wave png 文件必须是半透明的，这样它才能显示下面的海滩。

---

EDIT: The aim of OP's question is to clip the image so that it can take only the wave's area. That is achievable trough the use of clip-path. More information about this can be found at CSS Tricks.