html - 图像的不规则响应边框？

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 设置为高于 tour.jpg 的 z-index 的值。这应该可以解决问题。