css - 如何制作带有重复小图像的 `hr`？

Question

我有一张名为 myImg.png 的 256x256 图片。我想制作一个使用 myImg.png 的重复 16x16 版本的 hr 元素。

到目前为止我的 CSS:

hr#target {
    border: 0;
    height: 15px;
    background-color: #333;
    background-image: url(myImg.png);
    background-repeat: repeat-x;
    overflow: hidden;
}

但这只显示了我的图像的两次重复，完整尺寸为 256x256，我只能看到它的 15 像素。

如何制作一个 hr，其中背景图像是一排 myImg.png 的小版本？

Answer 1

使用background-size如:

hr#target {
    border: 0;
    height: 15px;
    background-color: #333;
    background-image: url(myImg.png);
    background-repeat: repeat-x;
    background-size: 16px 16px;
    overflow: hidden;
}

正如@bjskistad 提到的，您真的应该使用已经正确调整大小的图像。