CSS border-image：只有用指定的背景图像填充的角落。为什么？ [英] CSS border-image: Only the corners filled with the specified background-image. Why?

问题描述

我想使用CSS属性border-image：

我的代码：

  .wrap {width：400px; height：300px; margin：50px auto; position：relative;}。item {width：100px; height：100px; background-color：lightGray;边框：50px实心透明; border-image：url（http://lorempixel.com/50/50/）50 50 50 50 stretch stretch;}  

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

我错了什么？

我希望小图像重复以及垂直水平。

所以灰色方框中包含图像模式。

非常感谢任何帮助。

解决方案

不会，因为您的图片是50x50图片， border-image-slice 也设为50。

从 W3C Spec on border-image-slice ： / b>

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

你必须设置 border-image-slice 为小于25的中间区域，以覆盖图像。

注意： spec说顶部和底部边缘图像也被认为是空的，我不确定为什么浏览器会在所有四个角落显示图像。这可能归结于浏览器的实现。即使我们将 border-image-slice 指定为25，加上浏览器似乎也能正常工作。它与规范略有矛盾，但至少得到原因：）

I would like to use the CSS property "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.

解决方案

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

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).

From the W3C Spec on border-image-slice:

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.

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.

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 :)

这篇关于CSS border-image：只有用指定的背景图像填充的角落。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！