पृष्ठभूमि छवि खिंचाव वाई-अक्ष केवल, दोहराना-x

Question

मेरे पास एक div की पृष्ठभूमि छवि के रूप में एक छवि सेट है। डीआईवी आकार बदल रहा है और उनके अंदर वह छवि है जो ढाल है।

सीएसएस:

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

मैं, छवि केवल y- अक्ष में div की ऊंचाई योग्य बनाता है दोहराने-x रखने के लिए एक क्रॉस-ब्राउज़र समाधान की जरूरत है। JQuery के माध्यम से डीआईवी गतिशील रूप से आकार बदल रहा है।

वे JQuery का उपयोग कर क्रॉस-ब्राउज़र विकल्प हो सकते हैं। क्रॉस-ब्राउज़र समर्थन (आईई 7 +) प्राप्त करने के लिए स्क्रिप्ट का उपयोग करके मुझे कोई फर्क नहीं पड़ता। मैं छवि को खिंचाव नहीं करना चाहता क्योंकि यह एक्स-अक्ष पर छवि को फैलाते समय तीव्रता खो देता है, जिससे अर्द्ध पारदर्शी पीएनजी छवि लगभग पारदर्शी होती है।

धन्यवाद।

Answer 1

मुझे यह समस्या भी थी। अधिकांश ब्राउज़रों में यह आसान है, लेकिन आईई 8 और इसके नीचे यह मुश्किल है।

आधुनिक के लिए समाधान (कुछ भी नहीं 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> के क्षेत्र की जरूरत को कवर करने के शामिल करना सुनिश्चित करें:

फिर भी इस प्रकार मेरी भयानक हैक शुरू होता है।

सीएसएस:

#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।