如何制作重复小图像的'hr`？

Question

我有一个名为myImg.png的256x256图像。我想创建一个hr元素，它使用重复的16x16版myImg.png。

我的CSS到目前为止：

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

但这仅显示我的图像在完整的256x256尺寸上重复两次，我只能看到它的15px。

如何制作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所提到的，你应该使用已经正确调整大小的图像。