छवि को सीएसएस

Question

का उपयोग करके एक चक्र वाली छवि के रूप में प्रदर्शित किया जाना है यह मेरा कोड है - यह क्रोम, फ़ायरफ़ॉक्स और सफारी में काम करता है .. मैंने इसे विंडोज 7 पर परीक्षण किया है हालांकि आईई 8 और ओपेरा ब्राउज़र में निम्न कोड काम नहीं कर रहा है और इसके बजाए एक परिक्रमा छवि दिखाने की मैं वर्ग के रूप में छवि हो रही है

 
<div id="hotspot-img1-0"> 
    <ul> 
    <img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web" style="width:100px;height:100px;background:#fff;border:2px solid #ccc;-moz-border-radius:52px;-webkit-border-radius:52px;"> 
    </ul> 
</div> 

सीएसएस

#hotspot-img1-0{ 
top: 570px; 
left: 67px; 
height: 104px; 
width: 104px; 
border-top-left-radius: 52px; 
border-top-right-radius: 52px; 
border-bottom-right-radius: 52px; 
border-bottom-left-radius: 52px; 
box-shadow: 0px 2px 5px 0px; 
border-top-color: rgb(255, 255, 255); 
border-left-color: rgb(255, 255, 255); 
border-right-color: rgb(255, 255, 255); 
border-bottom-color: rgb(255, 255, 255); 
border-top-width: 2px; 
border-left-width: 2px; 
border-right-width: 2px; 
border-bottom-width: 2px; 
border-top-style: solid; 
border-left-style: solid; 
border-right-style: solid; 
border-bottom-style: solid 
} 

Answer 1

@ सांडहर्स्ट; इस तरह पहली बात यह है बुरा मार्कअप लिखने:

<div> 
    <ul> 
    <li> 
     <img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web"> 
    </li> 
    </ul> 
</div> 

& प्रश्न के लिए उत्तर img के बजाय background-image का उपयोग करें:

li{ 
background:url(image.jpg) no-repeat; 
-moz-border-radius:52px; 
-webkit-border-radius:52px; 
border-radius:52px; 
width:200px; 
height:200px; 
} 

Answer 2

यह एक CSS3 मुद्दा है। आईई और ओपेरा इसे अच्छी तरह से संभाल नहीं है। यदि आप चाहें तो इसे हल करने के लिए आप http://fetchak.com/ie-css3/ जैसे समाधान का उपयोग कर सकते हैं।

शुभकामनाएं!

Answer 3

वर्तमान में ओपेरा (संस्करण 10.5 आगे), सफारी (संस्करण 5 आगे) और क्रोम (संस्करण 5 आगे) सभी व्यक्तिगत सीमा - * - त्रिज्या गुणों और सीमा-त्रिज्या शॉर्टंड संपत्ति का समर्थन करते हैं जो वर्तमान डब्ल्यू 3 सी में मूल रूप से परिभाषित किया गया है विशिष्टता (यद्यपि सीमा शैली संक्रमण जैसे मुद्दों पर अभी भी बकाया बग हैं, लंबाई के लिए प्रतिशत का उपयोग आदि)। मोज़िला फ़ायरफ़ॉक्स (संस्करण 1.0 आगे) -मोज़-उपसर्ग के साथ सीमा-त्रिज्या का समर्थन करता है, हालांकि मोज़िला कार्यान्वयन और वर्तमान W3C विनिर्देश (नीचे देखें) के बीच कुछ विसंगतियां हैं। अद्यतन: हालिया फ़ायरफ़ॉक्स रात के संस्करण -मोज़-उपसर्ग के बिना सीमा-त्रिज्या का समर्थन करते हैं। सफारी और क्रोम (और अन्य वेबकिट आधारित ब्राउज़र) ने संस्करण 3 के बाद से -webkit- उपसर्ग के साथ सीमा-त्रिज्या का समर्थन किया है (अब संस्करण 5 से आगे की आवश्यकता नहीं है), हालांकि वर्तमान विनिर्देश से कुछ विसंगतियों के साथ (इस लेख को आगे के लिए देखें वेबकिट संभाल सीमा-त्रिज्या के पुराने संस्करणों के बारे में विवरण)। यहां तक ​​कि माइक्रोसॉफ्ट ने हाल ही में पूर्वावलोकन रिलीज में, इंटरनेट एक्सप्लोरर 9 ऑनवर्ड (उपसर्ग के बिना) से सीमा-त्रिज्या के लिए समर्थन का वादा किया है।

http://www.css3.info/preview/rounded-border/

Answer 4

border-radius CSS3 declaration is unsupported इंटरनेट एक्सप्लोरर 8 और नीचे में। ओपेरा में गोलाकार सीमाएं प्राप्त करने के लिए आप -o-border-radius घोषणा का उपयोग कर सकते हैं।

CSS3 Pie इंटरनेट एक्सप्लोरर के पुराने संस्करणों में गोलाकार सीमाओं को प्राप्त करने में मदद कर सकता है, लेकिन मैं उन्हें केवल स्क्वायर छवियों (graceful degradation and progressive enhancement के सिद्धांतों के बाद) छोड़ने की सलाह दूंगा।

Answer 5

यहां एक वेबसाइट http://www.danielmall.com/ है जहां छवियों को मंडली में प्रदर्शित किया जा रहा है। वेबसाइट के लेखक ने आईई और फ़ायरफ़ॉक्स दोनों के साथ काम करने के लिए jquery और css का उपयोग किया है। पृष्ठ स्रोत देखें और आपको इसका उपयोग करने के तरीके पर कुछ रोचक जानकारी मिल जाएगी।

Answer 6

मेरी जानकारी के लिए

, वहाँ ओपेरा या IE एक <img> क्लिप को पाने के लिए कोई रास्ता नहीं है सीएसएस का उपयोग कर एक सर्कल में। सीमा-त्रिज्या हालांकि तत्व शैलियों में सेट पृष्ठभूमि छवियों क्लिप करेगा।

आप clip things using SVG पर सक्षम हो सकते हैं, लेकिन मैं उस पृष्ठ पर ओपेरा में काम करने के लिए किसी भी उदाहरण को प्राप्त करने में सक्षम नहीं था।

Answer 7

छवि मानचित्र आपके लिए यह कर सकते हैं।

Clicking content below image with higher z-index

http://jsfiddle.net/u9cYZ/

http://jsfiddle.net/u9cYZ/3/

IE के लिए