垂直重複使用css可調整大小的邊框圖像

我正在爲朋友製作網頁，並在一分鐘我有佈局如下：有10％的邊框，80％的中心區域的橫幅和內容，另有10 ％右邊界。垂直重複使用css可調整大小的邊框圖像

現在不是左右區域爲空，而是希望將圖像重複向下，直到頁面（每頁可能會不同）。我希望圖像在調整窗口大小時調整大小（因此img大小將在10％區域中爲100％）。

我已經添加了div並設置了float：left屬性並設置了大小，這很棒，但是我無法重新獲取圖像。我也嘗試將圖像設置爲背景圖像，並將其重新設置，然後保持其原始大小。有沒有辦法讓圖像重複並調整大小？

感謝，尼爾

2010-09-28 Neil

請發佈您的CSS元素。 – 2010-09-28 12:58:28

您可以重複CSS背景圖像，但你不能調整，據我所知。

顯然，CSS3爲您提供了指定背景圖像大小的方法。您可以按像素，寬度和高度或以百分比指定此大小。以百分比形式指定大小時，大小與使用background-origin指出的區域的寬度或高度有關。但是，到目前爲止，實現此功能的唯一瀏覽器是Opera 9.5，Safari 3，Konqueror和最新的firefox nightlies，它們使用-o-background-size，-webkit-background-size，-khtml-background-size和-moz -background大小。

例如，

#myDiv{background-size: 200px 50px}

正如你應該知道，這些都不是最常用的瀏覽器（IE，鉻，FF是），所以，你不應該使用這個現在。

來源

2010-09-28 13:03:58 Shikiryu

嘗試：

.myClass 
{ 
    background-repeat: repeat-y; 
}

它添加到您的div的規則，這將重蹈它作爲背景，而是要調整它，要麼你可以使用CSS3（這是不是很好的支持還）：

.myClass 
{ 
    background-size: 100px 500px 
}

或使用您最喜愛的圖像編輯軟件，它縮小:)

來源

2010-09-28 13:04:41 Kyle

恐怕不行。只有背景圖像纔可以重複，但不允許指定大小。使用CSS3，您可以使用background-size，但許多瀏覽器都不支持。

大多數設計師通過使圖像的內側與背景顏色混合來解決問題。

來源

2010-09-28 13:06:53

垂直重複使用css可調整大小的邊框圖像

回答

相關問題