css - 平铺背景图像时 -> 设置平铺的背景倍数？

标签 css

简单方形图像拼贴示例: - 49x50px

Square black bordered image 49x50px

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

Simple Black Square Repeated Y in 125x50px container example

问题:

仅使用CSS，是通过属性还是其他方式将自动高度属性为auto的容器设置为背景图像高度的四舍五入倍数以确保tile不被切断？

为什么/我的用法:

我的一个用法是有一个卷轴。顶部和底部看起来都很花哨和陈旧，而中间将是在 y 轴上重复的图像，但是如果底部没有完美匹配，它可能会导致明显的线条松动一个图像/容器的效果!

最佳答案

只需要使用background-repeat属性

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

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

关于css - 平铺背景图像时 -> 设置平铺的背景倍数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28636109/