Question

我有一个边框作为SVG文件，我想将其放置在另一个图像上。我使用绝对位置将其放置在图像顶部。但是，我有一个问题，底部的图像溢出，因为顶部的图像周围有透明区域。我只想在边框内显示底部图像，所以它周围是黑色的。

不能选择更改svg文件，因为将使用背景图像而不是黑色。

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
.item-container {
  background-color: #000;
  height: 275px;
}

.item-container .item-image {
  position: absolute;
  right: 50px;
  top: 0px;
  z-index: 1;
  max-height: 275px;
}

.item-container .item-border {
  position: absolute;
  right: 50px;
  top: 0px;
  z-index: 2;
  max-height: 275px;
}

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12 item-container">
        <img src="https://via.placeholder.com/290x275" class="item-image" alt="">
        <img src="https://svgur.com/i/92T.svg" alt="" class="item-border">
    </div>
  </div>
</div>

Answer 1

您可以尝试使用背景图像代替静态图像作为边框。 https://www.w3schools.com/cssref/pr_background-image.asp

CSS-SVG边框溢出

1 个答案: