Question

我将颜色十六进制代码指定为真正长div的background-color。但是，我希望这种颜色只能在水平方向上重复，从左到右，在第一部分，而不是再往下走。

可以使用background-repeat:repeat-y完成，还是有其他方法？

Answer 1

颜色没有高度......它们只是存在，没有尺寸。如果您想要在背景颜色和文档的其余部分之间进行视觉区分，则需要使用实心图像作为背景图像：

div.className {
  background-image:url("images/background.jpg");
  background-position:left top;
  background-repeat:repeat-x; // Causes repeat from left-to-right only
}

Answer 2

您的意思是重复背景颜色还是图像？我假设一个图像，因为重复背景颜色毫无意义。是的，这是正确的方法：

#mydiv {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
}

Answer 3

background-repeat CSS属性定义了背景图像的重复方式。可以沿水平轴，垂直轴，两者重复背景图像，或者根本不重复背景图像。当图像拼贴的重复不能让它们完全覆盖背景时，作者的控制方式可以由作者控制：默认情况下，最后一个图像被剪裁，但不同的拼贴可以改为大小，或者可以在瓷砖之间插入空格。

http://www.handycss.com/how/how-to-repeat-a-background-image-horizontally-with-css/

Answer 4

创建1px图像并将其放入编码为base64的CSS中，或者使用多个html元素和定位时，可以在没有文件的情况下实现此目的。您不能为纯CSS中定义的普通颜色指定背景大小（此时不使用图像技巧）。

另见Is embedding background image data into CSS as Base64 good or bad practice?

使用CSS仅使水平重复背景颜色

4 个答案: