如何使图像重复而不是拉伸？

Question

我有一个需要将背景图像重复到其内容的背景图像，就像这样： 但是使用以下代码：

.imgbord {
  background: url('https://i.imgur.com/LGlfFuU.png');
  background-repeat: round;
  color: white;
}

<div style="margin: 42px auto; width: 75%;">
  <div class="imgbord">some random content out here</div>
</div>

我看到了这个：

我得到了这个：

- Jack Glow

---

你确定要重复吗？看起来你想要100%的背景大小。 - Temani Afif

我想重复它的一部分，这样它看起来就像我展示的那样。@TemaniAfif - Jack Glow

我需要在Y和X两个方向上重复它。所以我真的不知道该怎么做。@Pete - Jack Glow

请分享您正在使用的背景，这样我们就可以了解您所拥有的内容。 - Temani Afif

请点击以下链接查看与编程相关的内容：https://imgur.com/a/wdmJxi7 @TemaniAfif - Jack Glow

Answer 1

我想您需要寻找 border-image 相关的内容。

.imgbord {
  border:4px solid transparent;
  border-image: url('https://i.imgur.com/LGlfFuU.png') 4 fill round;
  color: white;
  padding:50px;
  display:inline-block;
  margin:10px;
}

body {
  background:grey;
}

<div class="imgbord">some random content out here</div>


<div class="imgbord">some content</div>

与理解其工作原理以及如何调整值相关：https://dev59.com/erTna4cB1Zd3GeqPCe9k#56915094

- Temani Afif

---

一切都没问题，但我需要想办法在边缘处去除这种平滑。 - Jack Glow

@JackGlow 你需要尝试不同的值。这有点棘手，但我链接了另一个回答，详细说明了它的工作原理，这样你就知道该怎么做了。 - Temani Afif

@JackGlow 我进行了更新，切片为4更好，并且您可以使用round函数进行重复。 - Temani Afif