平铺背景图像时 - ＆gt;设置背景多个瓷砖？

Question

简单方形图像平铺示例： - 49x50px

平铺此图片 - 125x50px容器示例

问题：

仅使用CSS，将自动高度属性为auto的容器设置为背景图像高度的四舍五入是一个属性还是其他任何方法，以确保切片不被切断？

为什么/我的用法：

我的一个用法就是有一个卷轴。顶部和底部都是花式和旧的，而中间将是在y轴上重复的图像，但是如果底部没有完美匹配，则可以导致明显的线条松动一个图像/容器的效果！

Answer 1

只需要使用background-repeat属性

.container {
  background-image: url(URL_HERE);
  background-repeat: repeat-y;
}

这将在y轴上平铺背景图像的次数尽可能多地填充元素

Answer 2

据我所知，你不能用CSS做到这一点。

但是，您可以这样做：将图像调整为容器的尺寸

.test {
border-style: solid;
border-width: 14px 0px 0px;
-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round;
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round;
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round;
border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill round;
}

#test1 {
  width: 100px;
}

#test2 {
  margin-top: 80px;
  width: 120px;
}

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>

这是通过边框图像属性的圆形样式实现的

这会设置图像的所有4个边框，但我将其他边框设置为dimesion 0，所以你得到的是图像的条纹平铺，并调整为适合

请参阅border image generator以查看它。

另外，请将其应用于与您问题中的示例类似的示例。将鼠标悬停在div上以查看适应大小的图像

.test {
    width: 50px;
    height: 125px;
    border: solid black 1px;
    position: relative;
    transition: all 4s;
}
.test:hover {
    height: 400px;
}

.test:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 100%;
    left: 0px;
    top: 0px;
    border-left-width: 50px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-image-source: url(http://www.w3.org/TR/css3-background/border.png);
    border-image-slice: 27;
    border-image-repeat: round;
}

<div class="test"></div>