背景画像伸縮y軸のみ、リピート-xを保持

Question

divの背景画像として画像が設定されています。 DIVのサイズは変化しており、内部はグラデーションの画像です。

CSS：

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

私は、画像のみがy軸でのdivの高さに合わせ作る繰り返し-Xを維持するためのクロスブラウザのソリューションを必要としています。 DIVはJQueryを介して動的にサイズ変更されています。

JQueryを使用したクロスブラウザオプションがあります。私はクロスブラウザサポート（IE7 +）を得るためにスクリプトを使用してそれを達成しても構いません。半透明のPNG画像をほぼ透明にして、画像をX軸で伸ばしたときに強度が失われるため、画像を伸ばしたくありません。

ありがとうございました。

Answer 1

この問題もありました。ほとんどのブラウザでは簡単ですが、IE8以降は難しいです。

現代のためのソリューション（何もないIE8以下）ブラウザ：

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

そこはIE8の背景サイズを模倣し、以下、特にbackgroundSize.jsしかし、それは動作しませんが、あなたがそれをしたい場合はできるjQueryのプラグインです繰り返す。

とにかくので、私のひどいハックを開始します：

<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。