CSS3 में शीर्ष सीमा छवि

Question

मैंने border, border-top-image, border-image का उपयोग किया है और कोई भी ऐसा नहीं करता है जो मैं कर रहा हूं।

#footer { 
    overflow: hidden; 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
    padding: 26px 0 30px 0; 
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg'); 
    font-size: 0.8461538461538462em; 
    color: #aaa; 
} 

इस वेबसाइट मैं पर काम करने की कोशिश कर रहा हूँ करने के लिए लागू करने के लिए नहीं लगता है, मैं इसे फ़ायरफ़ॉक्स और क्रोम में की कोशिश की है:

मैं निम्नलिखित सीएसएस है।

मैं केवल छवि शीर्ष सीमा पर दिखाना चाहते हैं और कोई अन्य सीमाओं करना चाहते हैं (इसलिए यह एक <hr /> तरह तरह की है)

Answer 1

मुझे नहीं लगता कि border-top-image की तरह किसी भी तरह की संपत्ति देने के लिए है कि वहाँ है छवि सीमा एक तत्व के किसी भी पक्ष के लिए - उपयोग

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round; 

लेकिन यह सभी पक्षों के चारों ओर बॉर्डर दे। तक के URI: पक्षों मैं दे दी है के बाकी के चारों ओर बॉर्डर निकालने के लिए - http://jsfiddle.net/ashwyn/c7WxG/1/

Answer 2

सीमा छवि यूआरआई के रूप में निर्दिष्ट किया जाता है, दो अलग अलग समूहों के लिए -

border-bottom:0; 
border-left:0; 
border-right:0; 

यह काम किया है और यहां मेरे बेला है तीन छवियों को चार सीमा किनारों में से प्रत्येक के लिए निर्दिष्ट किया जा सकता है। यदि एक छवि यूआरआई दी जाती है, तो पहली टाइल सीमा रेखा पर केंद्रित होती है। यदि दो छवि यूआरआई दिए जाते हैं, तो वे सीमा रेखा के केंद्र में मिलते हैं, जो केंद्र की शीर्ष या बाईं ओर स्थित पहली छवि के साथ मिलते हैं। यदि तीन छवि यूआरआई दिए जाते हैं, तो दूसरा केंद्र बन जाता है और टाइल नहीं करता है। अन्य दो केंद्र छवि के दोनों तरफ रखे जाते हैं, पहले केंद्र के ऊपरी या बायीं तरफ जा रहे हैं और तीसरा नीचे या दाएं ओर जा रहा है।

अधिक

Answer 3

W3.org देखें border-image-width: a b c d; संपत्ति नहीं है। विवरण:

• a-d, शीर्ष, सही, नीचे और बाएँ सीमाओं की चौड़ाई क्रमशः विज्ञापन के
• मूल्यों रूप में हो सकता:
  • [x]px
  • [x] - सीमा के गुणकों -विड्थ मूल्य
  • [x]% - छवि स्लाइस का प्रतिशत (सफारी 7 में गैर-काम नहीं करता है)
  • auto - संबंधित छवि स्लाइस की चौड़ाई से प्राप्त
• डिफ़ॉल्ट मान 1 है।
• अगर आप d छोड़ देते हैं, b का मूल्य बाईं सीमा के लिए इस्तेमाल किया चौड़ाई
• अगर आप भी c छोड़ देते हैं, a का मूल्य भी निचली सीमा के लिए प्रयोग किया जाता है चौड़ाई
• अगर आप भी b छोड़ देते हैं, a का मूल्य तो अपने उदाहरण के लिए आप इस्तेमाल कर सकते हैं सभी सीमाओं :)

के लिए प्रयोग किया जाता है:

border-image-width: 100% 0 0 0; 

वैकल्पिक रूप से border-image आशुलिपि संपत्ति border-image-width एक पैरामीटर के रूप में शामिल हैं, तो सीएसएस की एक पंक्ति में:

border-image: url(image.png) 100% 0 0 0/[desired_border_width]px 0 0 0 repeat; 

इस शीर्ष टुकड़ा के लिए पूरी छवि का उपयोग करता है ("100% 0 0 0") और के रूप में यह लागू होता है वांछित चौड़ाई पर शीर्ष सीमा।

Answer 4

एक अन्य समाधान - बनाने के दृश्य "से पहले" phseudo तत्व:

.yourDiv::before{ 
    background:url("http://lorempixel.com/200/100/"); 
    width:100%; 
    height:20px; 
}