图像的不规则响应边框？

Question

所以说我有这样的边框：

我如何将其与我的形象一起响应？

我最初的想法是拥有这样的东西：

<div class="frame">
            <img src="img/tourism.jpg" alt="image" class="bw-img">
            <img src="img/img-frame.png" alt="img frame" class="img-frame">
</div>

我基本上绝对将框架定位在我的旅游图像上，两者的宽度都是100％并且与初始尺寸相匹配，但我不相信它的出路。

还有其他想法吗？

Answer 1

首先放置边框，然后使用position：absolute将其叠加到另一个图像上。

<div class="frame">
            <img src="img/img-frame.png" alt="img frame" class="img-frame"
                    style="position:absolute">
            <img src="img/tourism.jpg" alt="image" class="bw-img">

</div>

编辑：仅为了信息，z-index CSS属性定义哪一个将在顶部。最高价值最重要。

Answer 2

你的画面是.png，这样你就可以使其中的所有内容都透明，边框形状除外。接下来输入你上面提到的html，并用css覆盖你的2个图像。将帧图像的z-index设置为高于tourism.jpg的z-index的值。这应该可以解决问题。