背景img重複x和Y

我正在嘗試使用背景圖像屬性。我真的很困惑重複x和y。我試圖弄清楚它的功能，並且發現我發現的在線事物不夠好。我創建了兩列，左欄將獲得63％，右欄37％（近似）。我使用了寬度爲3000px，高度爲160的背景圖像，併爲兩列使用了兩種不同的顏色。也就是說，在1890px或63％之後，顏色會發生變化。背景img重複x和Y

我使用我的筆記本電腦與1350px寬屏幕。我不斷改變repeat-y的比例，看看它在做什麼。我仍然無法弄清楚，發生了什麼事。這是我的理解，如果我錯了，請給我更簡單的解釋。對我來說，如果我設置重複44％，那麼它會佔用當前容器的44％，比如說Z PX，並且從z PX開始到圖像的結尾設置背景圖像，在我的情況下爲3000px，垂直重複該過程。我希望我很清楚。我對麼？請讓我知道你的想法或以你自己的方式向我解釋。謝謝！

#page{ 

     background:url("bg.jpg") repeat-y 63%; 

    } 
    .clear{ 
     clear:both; 
    } 
    div.left{ 
     width:63.11111111%; 
     float:left; 



    } 
    div.right{ 
     float:right; 
     width:36%; 

    } 

} 

    </style> 
</head> 
<body> 
    <div id="page"> 

     <div class="left"> 
      this is left column 
     </div> 
     <div class="right"> 
      this is right column 
     </div> 
    <div class="clear"></div> 
    </div> 

</body>

來源

2013-08-06 user1986244

閱讀文檔：https://developer.mozilla.org/en-US/docs/Web/CSS/background –

在線代碼：嘗試http://jsfiddle.net/ –

的背景重複屬性和背景位置屬性是兩回事。 background-repeat屬性設置是否或如何重複背景圖像;默認情況下，垂直（= repeat-y）和水平（= repeat-x）重複背景圖像。

在你的例子中，圖像將被垂直重複;但是你使用的div並沒有多少關注它，因爲圖像比你的div大得多。 我建議您嘗試使用較小的圖片，例如25x25像素，並把一些文本（例如lorem ipsum）或給這個200像素的高度，並再次玩的價值。

background-position屬性設置背景圖像的起始位置;第一個值是水平位置，第二個值是垂直位置。

在您的示例中，百分比描述了圖像中從水平軸開始的點。

如果您只指定一個關鍵字，就像您一樣，垂直軸的另一個值將爲「中心」。所以你的圖像可以從中間，縱軸看到。

試試我的建議！如果它似乎沒有工作，我會在網上舉個例子。讓我知道。

PS：沒有爲列指定顏色。

來源

2013-08-06 06:00:13 lijn

可能是我問了一個錯誤。我正在尋找不同的迴應。我正在閱讀Meyer的權威指南級聯樣式表。有一點，在頁261，「百分比值適用於元素和原始圖像」。因此，當我說63％時，圖像1890像素處的3000像素寬度圖像的63％和容器窗口右側（水平方向）的63％對齊在一起 – user1986244

背景位置是您用這些百分比指定的位置，這不會影響容器/窗口。該百分比將（確實）僅確定圖像開始與他的容器對齊的點（您的1890像素）。（我認爲你理解它，但似乎很難解釋。） – lijn

背景img重複x和Y

回答

相關問題