背景圖像僅限伸縮y軸，保持重複-x

我將圖像設置爲div的背景圖像。 DIV大小正在變化，其內部是漸變的圖像。背景圖像僅限伸縮y軸，保持重複-x

CSS：

#scroller_shadow{ 
    background-image:url(../img/ui/shadow.png); 
    background-repeat:repeat-x; 
    background-position:top; 
}

我需要使圖像適合僅在y軸的div的高度，保持重複-X跨瀏覽器的解決方案。 DIV正在通過JQuery動態調整大小。

他們可能是一個使用JQuery的跨瀏覽器選項。我不介意使用腳本來實現這一點，以獲得跨瀏覽器支持（IE7 +）。我不想拉伸圖像，因爲當您在x軸上拉伸圖像時會失去強度，從而使半透明png圖像幾乎透明。

謝謝。

來源

2013-03-01 Idan Shechter

我也有這個問題。在大多數瀏覽器中都很容易，但IE8和以下版本都很棘手。

解決方案爲現代（什麼也沒IE8及以下）的瀏覽器：

#scroller_shadow { 
    background: url(../img/ui/shadow.png) center repeat-x; 
    background-size: auto 100%; 
}

有jQuery插件，可以模仿背景大小IE8及以下，特別backgroundSize.js但它不工作，如果你想讓它重複。

反正就這樣開始了我的可怕黑客：

<div id="scroller_shadow"> 
    <div id="scroller_shadow_tile"> 
     <img src="./img/ui/shadow.png" alt="" > 
     <img src="./img/ui/shadow.png" alt="" > 
     <img src="./img/ui/shadow.png" alt="" > 
     ... 
     <img src="./img/ui/shadow.png" alt="" > 
    </div> 
</div>

確保包括足夠<img>的覆蓋所需的區域。

CSS：

#scroller_shadow { 
    width: 500px; /* whatever your width is */ 
    height: 100px; /* whatever your height is */ 
    overflow: hidden; 
} 

#scroller_shadow_tile { 
    /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */ 
    width: 9999px; 
    height: 100%; 
} 

#scroller_shadow_tile img { 
    height: 100%; 
    float: left; 
    width: auto; 
}

不管怎麼說，這個想法是創建圖像拉伸的效果。

JSFiddle。

來源

2013-03-01 17:12:30

背景圖像僅限伸縮y軸，保持重複-x

回答

相關問題