2

好的，所以我想使用圆形图像作为边框图像来覆盖图像的整个外部。您可以在下面看到两个图像，其中一个是矩形，另一个是圆形。我能够弄清楚如何使用矩形图像来完美地拟合给定的图像，但现在我正在尝试使用相同的技术来拟合圆形图像作为边框，但我无法找到一种方法来实现这一点技术。因此，目前对于矩形图像，这些样式正在被使用：

.frame{
    height: 192px;
    width: 160px;
    border-width: 30.4px 32px;
    border-image: url("/images/frame-4.png") 100 / 1.6 / 0 stretch;
}

在此处输入图像描述

现在要使用圆形图像作为边框并将图像放在里面，我在框架类上使用边框半径。

.frame{
    border-radius: 111px;
    height: 192px;
    width: 160px;
    border-color: red;
    border-width: 16px;
    background: blue;
    /* border-image: url("/images/frame-5.png") 100 / 1 / 0 stretch; */
}

当我使用边框颜色时，一切看起来都很好

在此处输入图像描述

但是当我打开边框图像时，事情开始分崩离析

在此处输入图像描述

我不确定发生了什么以及如何解决这个问题。https://i.imgur.com/erDQcs5.png如果有人想尝试一下，这里是图片链接。由于我希望边框图像完美地包裹图像，我认为边框图像是最好的方法，而不是使用多个div. 有没有更简单更好的方法来做到这一点？任何帮助表示赞赏。

4

2 回答 2

3

你可以像下面这样简单地做。透明边框和你的框架作为背景：

img {
  border-radius:50%;
  border:19px solid transparent;
  background:url(https://i.imgur.com/erDQcs5.png) center/100% 100% border-box;
}
<img src="https://picsum.photos/id/1/200/200" >

<img src="https://picsum.photos/id/1/200/150" >

<img src="https://picsum.photos/id/1/150/200" >

于 2021-06-12T09:54:59.380 回答
1

嗯……这个怎么样？

我认为这不是完美的解决方案，但这很好用。

我用background-imageandpadding而不是border-image.

在子元素（内容）中，我使用了border-radius: inherit.

如果您想要测试示例代码，请输入正确的图片网址。

.border-image {
  border-radius: 111px;
  height: 192px;
  width: 160px;
  background-image: url("frame");
  background-size: 100% 100%;
  padding: 20px;
}

.contents {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("url");
  background-repeat: no-repeat;
  background-size: cover;
}
<body>
  <div class="border-image">
    <div class="contents"></div>
  </div>
 </body>

于 2021-06-12T06:47:33.577 回答