图像前端复杂框架

Question

我是前端方面的新手，现在我必须为一个志愿项目准备一个网站。我有一个复杂的框架（附有屏幕截图），我需要将图像放入这样的框架内 - 最好的解决方案是什么？我认为可以使用 border-image 属性，但在这种情况下，超出边界的图像部分也会被看到，这当然是我想避免的。我将非常感谢您的帮助！

Answer 1

在这种情况下，我只使用一个 div，将 div 的背景图像设置为您的边框图像。

在 div 内您将拥有应在此处显示的图像，这是一个示例：

.border-image-wrapper {
    background-image: url('https://i.stack.imgur.com/FuXcL.png');     
    background-size: cover;
    background-repeat: no-repeat;
    width: 540px;
    height: 398px;
    max-width: 540px;
}

img {
    display: block;
    max-height: 210px;
    position: relative;
    left: 150px;
    top: 80px;
}

<div class="border-image-wrapper">
  <div class="img-container">
    <img src="https://placekitten.com/g/600/700" alt="">
  </div>
</div>

---

另一种可能性是图像不在边框内，但背景图像本身应该是其中图像的形状，我会执行以下操作：

使 PNG 的内部透明，然后将“背景图像”设置为前景图像，并在其后面设置应由背景图像边框的实际图像。

我希望我说得足够清楚