फ़ायरफ़ॉक्स -मोज़-सीमा-त्रिज्या छवि को फसल नहीं करेगा?

Question

क्या किसी को छवि के सीमा त्रिज्या सेट होने पर फ़ायरफ़ॉक्स को कोनों को फसल करने का कोई तरीका पता है? इसमें तत्व शामिल होगा ठीक काम करेगा लेकिन मुझे बदसूरत कोनों को चिपकाया जाएगा।

छवि को पृष्ठभूमि छवि के रूप में सेट किए बिना इसे ठीक करने का कोई तरीका या इसे अपनी साइट पर रखने से पहले इसे संसाधित करना?

Answer 1

यदि आप सीमा त्रिज्या को सीधे img तत्व पर लागू करते हैं तो यह फसल नहीं पड़ता है? known issues with -moz-border-radius as far as contained content is concerned हैं।

--edit

ठीक है, समझ img या तो फसल नहीं है। अगर आपकी चित्र एक ठोस पृष्ठभूमि पर png/gif किसी प्रकार का है आप कुछ इस तरह करने में सक्षम हो सकता है:

img { 
    border: 10px solid white; 
    -moz-border-radius: 10px; 
} 

लेकिन अगर आप तो यह काम करने के लिए नहीं जा रहा है एक तस्वीर पर गोलाकार कोनों पाने के लिए कोशिश कर रहे हैं 3.5 में

Answer 2

वर्कअराउंड: छवि को कंटेनर तत्व की पृष्ठभूमि के रूप में सेट करें, फिर उस तत्व पर सीमा त्रिज्या जोड़ें।

Answer 3

युक्ति: एक कंटेनर तत्व की पृष्ठभूमि के रूप में छवि सेट तो उस तत्व पर बॉर्डर की त्रिज्या जोड़ें।

यह तब तक काम नहीं करेगा जब तक कि छवि div का एक ही आकार न हो। जब तक आप फ़ायरफ़ॉक्स 3.6 में नई सीएसएस प्रॉपर्टी का उपयोग नहीं करते हैं जो पृष्ठभूमि छवि आकार के लिए अनुमति देता है, लेकिन शायद ही कोई भी 3.6 पर पहले से ही है।

तो मैं एलेक्स से सहमत हूं, यह है कि यदि आप छवि को div/अन्य elm का आकार बनाते हैं।

Answer 4

मुझे लगता है कि उत्तर देने के लिए मुझे लगता है लेकिन मेरी अंग्रेजी के लिए खेद है ... मैंने इस सवाल को हल किया कि छवि पर एक और div डालने और छवि पर कोई पृष्ठभूमि रंग नहीं है।

#imageContainer { 
    -webkit-border-radius:10px 
    -moz-border-radius:10px; 
    z-index:1; 
} 
#borderContainer { 
    position:absolute; 
    border:1px solid #FFFFFF; 
    -webkit-border-radius:10px 
    -moz-border-radius:10px; 
    z-index:10; 
} 

Answer 5

मुझे नहीं लगता कि फ़ायरफ़ॉक्स में सीधे छवि को चलाने के लिए -मोज़-सीमा-त्रिज्या का उपयोग करने का कोई तरीका है। लेकिन आप गोलाकार कोनों को पुराने मार्कअप के साथ पुराने तरीके से अनुकरण कर सकते हैं। सीएसएस

<div id="container"> 
    <img src="images/fubar.jpg" alt="situation normal" /> 
    <div class="rounded lt"></div> 
    <div class="rounded rt"></div> 
    <div class="rounded lb"></div> 
    <div class="rounded rb"></div> 
</div> 

तब:

#container {position:relative;} 
#container img {z-index:0;} 
.rounded {position:absolute; z-index:1; width:20px; height:20px;} 
.lt {background:url('images/rounded_LT.png') left top no-repeat;} 
.rt {background:url('images/rounded_RT.png') right top no-repeat;} 
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;} 
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;} 

कोनों में से पृष्ठभूमि छवियों पारदर्शिता के साथ, एक वर्धमान चाँद की तरह तरह की लग रही

तो यह है कि इस तरह दिखता है। यह एक नकारात्मक अंतरिक्ष तकनीक है, जहां आप छवि को दिखाने के लिए अनुमति दे रहे हैं कि कोनों में उनकी पारदर्शिता कहाँ है।

पीएनजी -24 पृष्ठभूमि के साथ डिवी कोनों बहुत अच्छी तरह से काम करेंगे। यदि आप जादुईपन से निपट सकते हैं, तो आप आईई 6 के लिए जीआईएफ पृष्ठभूमि का उपयोग कर सकते हैं, या स्क्वायर कोनों के लिए पूरी तरह से पृष्ठभूमि छवि को हटा सकते हैं। आईई 6 में सीएसएस की सेवा के लिए सशर्त टिप्पणियों का प्रयोग करें।

Answer 6

फ़ायरफ़ॉक्स एक पृष्ठभूमि छवि क्लिप करने लगता है, इसलिए यदि आप एक एच 1 पृष्ठभूमि छवि सेट करते हैं और उस पर सीमा-त्रिज्या लागू करते हैं तो यह क्लिप करेगा। (बस एफएफ 3.6 में सत्यापित है।12)

Answer 7

.round_image_borders { 

    position:relative; // fix for IE8(others not tested) 
    z-index:1; // fix for IE8(others not tested) 
    width:114px; 
    height:114px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    behavior:url(border-radius.htc); // fix for IE8(others not tested) 
} 

मैं इस लिंक से "border-radius.htc" स्क्रिप्ट मिल गया:

http://code.google.com/p/curved-corner/

क्या यह करता है यह IE8 के लिए दौर कोनों के लिए समर्थन जोड़ता। मुझे स्थिति भी सेट करनी पड़ती थी: सापेक्ष और जेड-इंडेक्स, क्योंकि अन्यथा div (और पृष्ठभूमि छवि) वांछित div कंटेनर के नीचे दिखाई देगी जिसमें कंटेनर (round_image_borders) div डाल दिया गया था।

इस के लिए काम करता है:

एफएफ 3.6.16

आईई 8

क्रोम 12.0

और हाँ, छवि वर्ग round_image_borders साथ div के रूप में एक ही आकार होना आवश्यक है। लेकिन यह कामकाज उन छवियों के साथ उपयोग किया जाना है जिनके सभी का आकार समान है।

Answer 8

यदि आप अतिप्रवाह का उपयोग करते हैं: छुपा यह छवि कोनों को चिपकाने वाला नहीं दिखाएगा।

कौन जानता है, वे अभी भी वहां हो सकते हैं, बस छिपे हुए हैं।

Answer 9

img { 
overflow: hidden; 

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
border-radius: 10px; 
}