2012-01-30 16 views
11

में एकाधिक पृष्ठभूमि छवियों ने फ़ोटोशॉप में एक रिबन बनाया। रिबन में तीन भाग हैं। बाएं और दाएं हिस्से एक निश्चित 10px हैं। मध्य संप्रदाय एक दोहराने योग्य पैटर्न है।एक div

क्या इन छवियों को मेरे टैग की पृष्ठभूमि के रूप में जोड़ना संभव है?

+2

केवल CSS3 में आपके पास तत्व के लिए कई पृष्ठभूमि हो सकती हैं, इसलिए हाँ, लेकिन सभी ब्राउज़र इसका समर्थन नहीं करेंगे। – j08691

+0

इस मुद्दे के लिए यहां एक और संभावित समाधान है। यदि आप पृष्ठभूमि बदल सकते हैं तो यह दो छवियों से बना है, आप यहां बताई गई तकनीक का उपयोग कर सकते हैं: http://www.alistapart.com/articles/slidingdoors2/ –

उत्तर

16

@ j08691 के रूप में कहा, केवल css3

#yourTag { 
background-image: url(one.png), url(two.png); 
background-position: center bottom, left top; 
background-repeat: no-repeat; 
width: 300px; 
height: 350px; 
} 

में यहाँ आप एक है: good example

+0

अच्छा समाधान। लेकिन, जो मैंने पढ़ा है, वह सभी ब्राउज़रों में काम नहीं करता है ... मेरे दिमाग में, उपयोग करने के लिए काफी व्यापक है, लेकिन आपके लक्षित दर्शकों पर निर्भर करता है। सावधानी से प्रयोग करें। – blo0p3r

0

यह आधुनिक ब्राउज़रों के लिए css3 साथ ही संभव है।

.element{ 
    background-image: url(key.png), url(stone.png); 
} 
1

बस टैग में एक वर्ग जोड़ें, फिर सीएसएस का उपयोग उस वर्ग में पृष्ठभूमि जोड़ें। यह IE8 पर काम नहीं करेगा या उससे पहले

div 
{ 
background:url(smiley.gif) top left no-repeat, 
url(sqorange.gif) bottom left no-repeat, 
url(sqgreen.gif) bottom right no-repeat; 
} 

कोड http://www.w3schools.com/cssref/css3_pr_background.asp

यह IE के अन्य संस्करणों में काम करने के लिए प्राप्त करने के लिए से आप CSS3Pie http://css3pie.com/documentation/supported-css3-features/#pie-background की तरह कुछ का उपयोग कर सकते हालांकि मैं कोड डालने से पहले अच्छी तरह से परीक्षण होता है लाइव