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

Question

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

可以这样做使用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的图像时没有文件实现这一点，并把它放到你的CSS编码为base64，或者使用多个HTML元素和定位。您目前无法为纯CSS中定义的纯色指定背景大小（不使用图像技巧）。

另请参阅Is embedding background image data into CSS as Base64 good or bad practice?