CSS3 के गोल कोनों को क्रोम / ओपेरा में ओवरफ्लो को कैसे छिपाएं

Question

मुझे अपने बच्चे के माता-पिता से मुखौटा सामग्री के लिए गोल कोनों की आवश्यकता है। overflow: hiddenसाधारण स्थितियों में काम करता है, लेकिन वेबकिट आधारित ब्राउज़रों और ओपेरा में टूट जाता है जब माता-पिता अपेक्षाकृत या बिल्कुल तैनात होते हैं।

यह फ़ायरफ़ॉक्स और IE9 में काम करता है:

सीएसएस

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

एचटीएमएल

<div id="wrapper">
  <div id="box"></div>
</div>

JSFiddle पर उदाहरण

सहायता के लिए धन्यवाद!

अद्यतन: इस समस्या का कारण बग क्रोम में तय किया गया है। मैंने ओपेरा या सफारी का फिर से परीक्षण नहीं किया है।

Answer 1

मुझे इस समस्या का एक और समाधान मिला। यह WebKit (या शायद क्रोम) में एक और बग की तरह दिखता है, लेकिन यह काम करता है। आपको बस इतना करना है - #wrapper एलीमेंट में एक WebKit CSS मास्क जोड़ना है। आप एक एकल पिक्सेल png छवि का उपयोग कर सकते हैं और यहां तक ​​कि इसे HTTP अनुरोध को बचाने के लिए CSS में शामिल कर सकते हैं।

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}​

JSFiddle उदाहरण

Comments

इस सुधार के लिए धन्यवाद। आज सफारी में इसे आज़माया (v6.0.2) और वहाँ मेरे लिए काम किया!

— billythetalented

हालांकि यह तत्व पर किसी भी छाया को तोड़ देगा।

— जैक जेम्स

यह पूरी तरह से तैनात बच्चों के साथ रैपर पर काम करता है, जहां अन्य समाधान नहीं है। अच्छा!

— दान तेलो

Chrome का उपयोग करते हुए 42.0.2311.90 (64-बिट), और यह फिक्स अभी भी आवश्यक है ... धन्यवाद!

— सिमोन

आपके समाधान मूल तत्व की छाया को हटाते हैं।

— ABDeveloper

Answer 2

अपने बॉर्डर-त्रिज्या आइटम में एक z-index जोड़ें, और यह इसके अंदर की चीजों को मास्क करेगा।

Comments

@ सिफु: आप बस गलत हैं। जो भी कारण के लिए, सुझाव के रूप में एक जेड-इंडेक्स जोड़ने से मेरे लिए (क्रोम के वर्तमान संस्करण में) यह सटीक समस्या हल हो गई है, और यह शीर्ष उत्तर की तुलना में अधिक सरल, अधिक सामान्य समाधान है।

— निक एफ

@ साइमन: याद रखें कि z- इंडेक्स का प्रभाव होने के लिए, कुछ शर्तों को पूरा करने की आवश्यकता होती है (उदाहरण के लिए स्थिति सेट करने की आवश्यकता है)। विवरण के लिए यहां देखें ।

— निक एफ

@NickF - यह क्रोम (-ium) में एक बग था; -webkit-mask-image: -webkit-radial-gradient(circle, white, black);एक प्रभावी वर्कअराउंड था, लेकिन, शुक्र है कि मुझे क्रोम को मिले सबसे हालिया अपडेट में बग फिक्स किया गया है।

— सिमोन

z-index 1 कंटेनर में। z- इंडेक्स -1 से निरपेक्ष तत्व ने इसे मेरे लिए हल किया।

— एज़ट्राएल-एनफोर्सआर

यह एक मेरे लिए काम किया। उपरोक्त आवरण समाधान नहीं करता है।

— रूवेन

Answer 3

हर किसी के लिए, मैं रैपर और बॉक्स के बीच एक अतिरिक्त div जोड़कर समस्या को हल करने में कामयाब रहा।

सीएसएस

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

एचटीएमएल

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

सभी की मदद करने के लिए धन्यवाद!

→ http://jsfiddle.net/5fwjp/

Comments

यह काम करता है क्योंकि तैनात तत्व वेबकिट में अपनी सामग्री को अपनी सीमा-त्रिज्या से क्लिप नहीं करते हैं। यह अतिरिक्त परत बस इसे इतना बना देती है कि सीमा-त्रिज्या के साथ div को तैनात नहीं किया जाता है, और बस एक तैनात तत्व के अंदर बैठता है।

— डैनियल बर्ड्सले

क्या आप संयोग से जान पाएंगे कि क्या यह बग / इच्छित व्यवहार है?

— 21'11

+1 वोट बग ... जब आपके पास एक छवि गैलरी होती है जो स्वचालित रूप से divs उत्पन्न करती है और स्थिति को पूर्णता में सेट करती है, तो यह "फीचर" वास्तव में sux ...

— inf3rno

@RunLoop मैं सिर्फ सफारी 7.1 में jsfiddle परीक्षण और ठीक काम करता है। क्या आप इस बारे में अधिक विशिष्ट हो सकते हैं कि क्या काम नहीं कर रहा है?

— jmotes

हमारे ग्राफिक डिज़ाइनर ने वास्तव में इस उत्तर को खोजने से 20 सेकंड पहले "खोजा" था: D

— Pere

Answer 4

अपारदर्शिता: 0.99; रैपर पर वेबकिट बग हल करें

Comments

transform: translateY(0);एक ऐसा विकल्प है जो वस्तु के दृश्य प्रतिनिधित्व के साथ हस्तक्षेप किए बिना एक ही परिणाम प्राप्त करता है (जब तक कि आप परिप्रेक्ष्य का उपयोग नहीं कर रहे हैं)।

— कांट

Answer 5

यह एक काम करता है:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Comments

transform: translateZ(0)मेरे लिए काफी है।

— कलवण १३'१५ को

ध्यान दें कि यह (विशेष रूप से translateZ) , आपके तत्वों के लिए हार्डवेयर त्वरण को सक्षम करेगा, जो कुछ मामलों में, दुख की बात है कि बिलकुल नए ब्रांड के कीड़े खोल सकता है।

— doldt

transform: translateZ(0)मेरे लिए भी काम किया। मेरे मामले में यह एक बुरा विचार नहीं है कि यह आइटम हार्डवेयर त्वरित है।

— सेबस्टियन लॉर्बर

Answer 6

नवीनतम क्रोम, ओपेरा और सफारी में समर्थित, आप यह कर सकते हैं:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

आपको http://bennettfeely.com/clippy/ टूल की जाँच जरूर करनी चाहिए !

Comments

मुझे लगता है कि आप इसे और भी अधिक क्लिप-पथ को छोटा कर सकते हैं : इनसेट (0%); ... बस एक क्लिप पथ होने लगता है चाल करने के लिए :-)

— Jakob E

वाह। यह एकदम सही जवाब है।

— शशांक भट्ट

Answer 7

उत्तर नहीं है, लेकिन यह क्रोमियम स्रोत के तहत एक दर्ज बग है: http://code.google.com/p/chromium/issues/detail?id=62363

दुर्भाग्य से, ऐसा नहीं लगता कि कोई इस पर काम कर रहा है। :(

Comments

और 3 साल बाद भी यह तय नहीं हो पाया है। <

— नाथन हॉर्बी

Answer 8

बॉर्डर के साथ मूल तत्व की अपारदर्शिता को बदलें और यह स्टैक्ड तत्वों को फिर से व्यवस्थित करेगा। घंटों के शोध और असफल प्रयासों के बाद इसने मेरे लिए चमत्कारिक रूप से काम किया। ब्राउज़र की इस पेंट प्रक्रिया को फिर से व्यवस्थित करने के लिए 0.99 की अपारदर्शिता को जोड़ना उतना ही सरल था। की जाँच करें http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 9

मेरे लिए समाधानों में से किसी ने भी अच्छा काम नहीं किया, केवल उपयोग करके:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

आवरण तत्व पर काम किया।

यहाँ उदाहरण: http://jsfiddle.net/gpawlik/qWdf6/74/

Answer 10

ग्रेकोरो के शानदार जवाब पर आधारित ...

यहां एक अधिक वास्तविक दुनिया उदाहरण है जिसमें कुछ भराव सामग्री के साथ दो विशेष विभाजन हैं। मैंने हार्ड-कोडित png पृष्ठभूमि को केवल एक हेक्स मान के साथ प्रतिस्थापित किया, अर्थात

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

के साथ बदल दिया गया है

-webkit-mask-image:#fff;

इसे देखें JSFiddle ... http://jsfiddle.net/hqLkA/

Answer 11

यहाँ देखो कि मैंने इसे कैसे किया; Jsfiddle

मेरे द्वारा लगाए गए कोड के साथ, मैं इसे वेबकिट (क्रोम / सफारी) और फ़ायरफ़ॉक्स पर काम करने में कामयाब रहा। मुझे नहीं पता कि यह ओपेरा के नवीनतम संस्करण के साथ काम करता है। हाँ, यह ओपेरा के नवीनतम संस्करण के तहत काम करता है।

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

Comments

border-radiusउस स्थिति में रैपर पर डालने की जहमत क्यों उठाई जाती है, आपको इसे सेट करने के साथ ही परिणाम मिलता है #box। इसके अलावा, यदि #boxसीमा त्रिज्या केवल वेबकिट को ठीक करने के लिए है तो आप -webkit-वहां संपत्ति को शामिल कर सकते हैं।

— रॉबट्रक

भूलभुलैया, यह कुछ स्थितियों में काम कर सकता है, लेकिन मेरे मामले में मैं एक समाधान की तलाश कर रहा हूं जो बॉक्स के आकार को परिवर्तित नहीं करता है (और आवरण अभी भी मुखौटा के रूप में काम करता है)। मेरा उदाहरण बहुत सरल था, लेकिन मैं बॉक्स से ड्रॉपशेडो को छिपाने के लिए रैपर का उपयोग करने की कोशिश कर रहा हूं (केवल दिखाई देने वाले छाया किनारों को बनाने के लिए रैपर पर पैडिंग का उपयोग करके)।

— jmotes

मदद के लिए धन्यवाद यद्यपि भूलभुलैया! आपके समाधान से मुझे समस्या के बारे में अधिक गंभीर रूप से सोचने में मदद मिली। Btw, आप अपनी पोस्ट में किए गए संपादन को अनदेखा कर सकते हैं। मैं इसे अपने लिए बनाना चाहता था। सॉरी :)

— jmotes

@ user480837 कोई समस्या नहीं दोस्त, खुशी है कि मैं मदद की गई है। :)

— भूलभुलैया

@Maze है कि अगर किसी भी तरह की एक सीमा लागू किया जाता है काम नहीं करेगा: jsfiddle.net/ptW85/228

— प्रतिजीवविषज

Answer 12

मैंने हर उत्तर की कोशिश की लेकिन सफलता के बिना। जांच के कुछ घंटों के बाद मुझे इस समस्या का समाधान मिला। अपनी कक्षा में इस गुणों का उपयोग करने से div तत्व कंटेनर को ओवरफ्लो नहीं कर पाएंगे।

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Answer 13

यदि आप छवि के लिए मास्क बनाना चाहते हैं और कंटेनर के अंदर की छवि को 'स्थिति: निरपेक्ष' विशेषता सेट नहीं करते हैं। आपको बस इतना करना है कि मार्जिन-लेफ्ट और मार्जिन-राइट को बदलना है। क्रोम / ओपेरा अतिप्रवाह का पालन करेगा: छिपा हुआ और सीमा-त्रिज्या नियम।

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }