CSS border-image：仅填充指定背景图像的角落。为什么？

I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image

我想使用CSS属性“border-image”:https://developer.mozilla.org/de/docs/Web/CSS/border-image

But for some reason it fills only the four corners of the element:

但由于某种原因,它只填充元素的四个角:

My code:

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}

<div class="wrap">
  <div class="item"></div>
</div>

What do I wrong?

我错了什么?

I would expect the little image to be repeated as well vertically as horizontally.

我希望小图像可以像水平一样垂直重复。

So that the grey box is enclosed with the image pattern.

因此灰色框用图像模式包围。

Any help very much appreciated.

任何帮助非常感谢。

3 个解决方案

#1

No, it won't because your image is a 50x50 image and the border-image-slice is set as 50 too.

不,它不会,因为您的图像是50x50图像,border-image-slice也设置为50。

The way border-image-slice works is that the UA will split the image into 9 pieces based on offsets indicated in the slice. In your case, once you slice the image by 50px, there is nothing left in middle to set for the areas marked as 5, 6, 7 and 8 in the below image (Image is copied from MDN).

border-image-slice的工作方式是UA会根据切片中指示的偏移将图像分割成9个部分。在您的情况下,一旦您将图像切片50px,中间没有任何内容可以设置为下图中标记为5,6,7和8的区域(图像从MDN复制)。

From the W3C Spec on border-image-slice:

从边框图像切片上的W3C规范:

The regions given by the ‘border-image-slice’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

由“border-image-slice”值给出的区域可能重叠。但是,如果左右宽度的总和等于或大于图像的宽度,则顶部和底部边缘以及中间部分的图像都是空的,这与非空透明图像的效果相同。为这些部分指定。类似于顶部和底部值。

You'd have to set the border-image-slice as something lesser than 25 for the areas in the middle to get covered with the image.

您必须将border-image-slice设置为小于25的区域,以便中间区域覆盖图像。

Note: Though the spec says top and bottom edge image are also considered as empty, I am not sure why browsers show the image on all four corners. That may be down to browser implementation. Plus browsers seem to work fine even when we specify the border-image-slice as 25. It is slightly contradicting with the spec but you atleast get the reason :)

注意:虽然规格说顶部和底部边缘图像也被认为是空的,但我不确定为什么浏览器会在所有四个角上显示图像。这可能取决于浏览器的实现。即使我们将border-image-slice指定为25,加上浏览器似乎也能正常工作。它与规范略有矛盾,但你至少得到了理由:)

#2

Not sure what works, but using an image of larger size sort of fixed it.

不确定什么有效,但使用更大尺寸的图像修复它。

Please note that usually the images that are used for border-image are images with graphics at their edges. It's not that entire image is repeated along the edges. It's sort of all four corners of the image are aligned to the corners of our div and then rest of the image is adjusted according to specified properties.

请注意,通常用于边框图像的图像是边缘有图形的图像。并不是整个图像沿着边缘重复。图像的所有四个角都与div的角对齐,然后根据指定的属性调整图像的其余部分。

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid;
  border-image: url(http://lorempixel.com/150/150/) 25;
}

<div class="wrap">
  <div class="item"></div>
</div>

#3

Not sure if this is what you where looking for. You need to add box-sizing:border-box; to your .item class.

不确定这是否是你在寻找的地方。你需要添加box-sizing:border-box;到你的.item课程。

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
box-sizing:border-box;
}

<div class="wrap">
  <div class="item"></div>
</div>

Hope this helps :)

希望这可以帮助 :)

#1