僅使用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?