16
मेरे पास वर्तमान में वाई पर दोहराने वाली एक छवि है, लेकिन मैं चाहता हूं कि यह 20 पीएक्स शुरू करे जहां से div शुरू होता है ....सीएसएस: दोहराने के साथ पृष्ठभूमि की स्थिति?
मैं यह कैसे कर सकता हूं?
A
उत्तर
37
शायद आपको इसके लिए :after या :before का उपयोग करना चाहिए, क्योंकि आपके HTML में अतिरिक्त मार्कअप जोड़ने की आवश्यकता नहीं है। इस तरह:
.container{
height:400px;
background:red;
position:relative;
width:400px;
}
.container:after{
content:"";
position:absolute;
top:20px;
left:0;
right:0;
bottom:0;
background:url(http://lorempixel.com/400/200) repeat-y;
}
चेक इस http://jsfiddle.net/h6K9z/
यह ऊपर IE8 & में काम करता है। आईई 7 या आईई 6 के लिए आप इसके लिए अतिरिक्त DIV दे सकते हैं।
-2
तुम बस background-position गुण सेट करने की आवश्यकता:
.yourClass {
background: url(../images/yourImage.png) repeat-y 0 20px;
}
+5
पृष्ठभूमि स्थिति पृष्ठभूमि के प्रारंभिक बिंदु को ले जाती है, उदा। पेज के नीचे 20px, लेकिन यह * इस बिंदु * ऊपर * दोहराने से नहीं रोकता है। – ajcw
-1
.yourClass{
background: url(images/yourImage.png) repeat-y;
background-position: 0px 20px;
}
+2
यह काम नहीं करता है (वेबकिट आधारित ब्राउज़र के साथ परीक्षण) पृष्ठभूमि स्थिति का कोई प्रभाव नहीं पड़ता है। या teh repeat y प्रारंभ स्थिति से परे चला जाता है। – NullVoxPopuli
+0
मुझे यह वही समस्या है, और @TheLindyHop सही है, इसका वेबकिट – codinghands
1
मैं आशुलिपि विधि पसंद करते हैं और background-repeat उदाहरण के लिए repeat-y 0 20px काम करेगा। यह मानते हुए कि jsFiddle sample ओपी के मामले का प्रतिनिधित्व करता है, समाधान को हरा पृष्ठभूमि (लंबवत) 20px पर शुरू करना चाहिए; "हैलो वहाँ!" पाठ हरी पृष्ठभूमि के शीर्ष पर नहीं बैठना चाहिए।
मेरा उत्तर यह है कि यह सीएसएस द्वारा स्पष्ट रूप से नहीं किया जा सकता है; मतलब, आप अपना लक्ष्य पूरा करने के लिए अपनी एचटीएमएल संरचना बदलना चाहेंगे। हालांकि, मैं दूसरों को बेहतर उत्तरों के साथ आने की उम्मीद कर रहा हूं।
0
मैं बस background-position संयोजन नहीं लगता कि:
background-position: 0px 20px;
background-repeat: repeat-y;
संबंधित मुद्दे
- 1. छवियाँ पृष्ठभूमि दोहराने सीएसएस के लिए प्रदर्शन
- 2. सीएसएस पृष्ठभूमि स्थिति
- 3. एंड्रॉयड छवि पृष्ठभूमि दोहराने
- 4. एकाधिक पृष्ठभूमि छवियों की स्थिति
- 5. सीएसएस पृष्ठभूमि छवि स्थिति (नकारात्मक स्थिति?)
- 6. सीएसएस: पृष्ठभूमि-स्थिति के साथ अलग-अलग कोने ऑफसेट्स
- 7. सीएसएस स्प्राइट्स और पृष्ठभूमि की स्थिति का उपयोग
- 8. सीएसएस वर्ग पृष्ठभूमि छवि क्षैतिज स्थिति?
- 9. दोहराना सीएसएस पृष्ठभूमि छवि दोहराएं
- 10. पृष्ठभूमि-स्थिति-एक्स (पृष्ठभूमि-स्थिति-वाई) एक मानक डब्ल्यू 3 सी सीएसएस संपत्ति है?
- 11. चौड़ाई: स्थिति के साथ 100%: निरपेक्ष (सीएसएस)
- 12. सीएसएस पृष्ठभूमि छवियों के साथ preload छवियों?
- 13. पृष्ठभूमि ढाल के साथ सीएसएस संक्रमण
- 14. पृष्ठभूमि-स्थिति सीएसएस के लिए काम नहीं कर रहा sprites
- 15. वाई-एक्सिस पर सीएसएस पृष्ठभूमि-स्थिति परिवर्तन केवल
- 16. सीएसएस पूर्ण स्थिति के अंदर पूर्ण स्थिति
- 17. सीएसएस की स्थिति क्या कर सकती है?
- 18. सीएसएस पृष्ठभूमि-दोहराना एक्स और वाई
- 19. पृष्ठभूमि-स्थिति केवल लंबवत
- 20. विंडो पृष्ठभूमि स्थिति पट्टी
- 21. सीएसएस - पृष्ठभूमि छवियों के रूप में स्प्राइट्स
- 22. पृष्ठभूमि-स्थिति: -20 9 पीएक्स -2 पीएक्स, मुझे नकारात्मक पृष्ठभूमि की स्थिति नहीं समझती
- 23. सीएसएस: बनावट पृष्ठभूमि बनाना
- 24. मैं css3 एनीमेशन के साथ पृष्ठभूमि स्थिति कैसे बदलूं?
- 25. सीएसएस पृष्ठभूमि ढाल सत्यापन
- 26. लंबन एकाधिक सीएसएस पृष्ठभूमि
- 27. सीएसएस पृष्ठभूमि ग्रेडियेंट दोहराव अंक
- 28. दोहराने वाले तत्वों के साथ अनंत अनुक्रम
- 29. सीएसएस div शीर्षक स्थिति
- 30. सीएसएस पृष्ठभूमि छवियां आईपैड
में कोई प्रभाव नहीं है यह बहुत ही बढ़िया है; यह काम करता हैं! धन्यवाद, @ संदीप। 'दाएं: 0; नीचे: 0; बाएं: 0', क्या यह 100% चौड़ाई और 100% ऊंचाई (निश्चित रूप से 20px से शुरू) भरने के लिए एक बिल्कुल-स्थित कंटेनर को "खिंचाव" करने का एक तरीका है? – moey
अपने उत्तर की जांच करते समय lorempixel.com भयानक सेवा की खोज की, धन्यवाद! – Trufa
सही: 0; नीचे: 0; बाएं: 0 वास्तव में कंटेनर फिलर है, IE8 में ठीक परीक्षण किया। यह नीचे की तरह काम करता है: 90 पीएक्स; यह अकेला सोने के लायक था। – Johan