मैं सीएसएस में माता-पिता से बाल अपारदर्शिता विरासत में नहीं लेना चाहता।
मेरे पास एक div है जो माता-पिता है, और मेरे पास पहले div के अंदर एक और div है जो कि बच्चा है।
मैं पैरेंट डिव में अपारदर्शिता गुण सेट करना चाहता हूं, लेकिन मैं नहीं चाहता कि चाइल्ड डिव को ओपेसिटी प्रॉपर्टी विरासत में मिले।
मैं उसे कैसे कर सकता हूँ?
जवाबों:
अस्पष्टता का उपयोग करने के बजाय, आरजीबीए के साथ पृष्ठभूमि-रंग सेट करें, जहां 'ए' पारदर्शिता का स्तर है।
इसलिए इसके बजाय:
background-color: rgb(0,0,255); opacity: 0.5;उपयोग
background-color: rgba(0,0,255,0.5);.png:)
अपारदर्शिता वास्तव में सीएसएस में विरासत में नहीं मिली है। यह एक पोस्ट-रेंडरिंग ग्रुप ट्रांसफ़ॉर्म है। दूसरे शब्दों में, यदि कोई <div>अस्पष्टता सेट है , तो आप div और उसके सभी बच्चों को एक अस्थायी बफर में रेंडर करते हैं, और फिर उस संपूर्ण बफर को पृष्ठ में दिए गए अस्पष्टता सेटिंग के साथ जोड़ते हैं।
यहां आप वास्तव में क्या करना चाहते हैं, यह उस सटीक रेंडरिंग पर निर्भर करता है जिसे आप खोज रहे हैं, जो प्रश्न से स्पष्ट नहीं है।
opacity: .7;पर div#containerहर बच्चे तत्व बनाता है - से ul/ liकरने imgके लिए p- यह भी एक ही अस्पष्टता है। यह निश्चित रूप से विरासत में मिला है।
opacity: 0.7में सभी वंशजों को यह देखने की कोशिश करें कि विरासत क्या दिखती है। जैसा कि मैंने कहा, इसके बजाय क्या होता है कि अस्पष्टता पूरे "तत्व और उसके सभी वंशज" समूह को विरासत के बजाय एक इकाई के रूप में लागू होती है।
जैसा कि अन्य लोगों ने इस और इसी तरह के अन्य धागों में उल्लेख किया है, इस समस्या से बचने का सबसे अच्छा तरीका RGBA / HSLA का उपयोग करना है या फिर एक पारदर्शी PNG का उपयोग करना है।
लेकिन, यदि आप एक हास्यास्पद समाधान चाहते हैं, तो इस धागे में एक और उत्तर में लिंक किए गए (जो मेरी वेबसाइट भी है) के समान है, यहां एक ब्रांड नई स्क्रिप्ट लिखी गई है जो इस समस्या को स्वचालित रूप से ठीक करता है, जिसे MustNotYoChild.js कहा जाता है:
http://www.impressivewebs.com/fixing-parent-child-opacity/
मूल रूप से यह माता-पिता के डिव से सभी बच्चों को हटाने के लिए जावास्क्रिप्ट का उपयोग करता है, फिर बच्चे के तत्वों को वापस उस स्थान पर भेज दें जहां वे वास्तव में उस तत्व के बच्चे के बिना होना चाहिए।
मेरे लिए, यह एक अंतिम उपाय होना चाहिए, लेकिन मुझे लगा कि ऐसा कुछ लिखने में मज़ा आएगा, अगर कोई ऐसा करना चाहता है।
यदि आपके माता-पिता पारदर्शी हैं और आप अपने बच्चे को एक जैसा बनाना चाहते हैं, तो एक छोटी सी चाल, लेकिन विशेष रूप से परिभाषित (उदाहरण के लिए एक ड्रॉपडाउन के उपयोगकर्ता एजेंट शैलियों को अधिलेखित करने के लिए):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}बाल तत्व की अस्पष्टता मूल तत्व से विरासत में मिली है।
लेकिन हम अपनी उपलब्धि को पूरा करने के लिए सीएसएस स्थिति संपत्ति का उपयोग कर सकते हैं।
टेक्स्ट कंटेनर डिव को पैरेंट डिव के बाहर रखा जा सकता है, लेकिन वांछित प्रभाव को पेश करते हुए पूर्ण स्थिति के साथ।
आदर्श आवश्यकता ------------------ >>>>>>>>>>>>>>
एचटीएमएल
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>सीएसएस
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}आउटपुट: -
मूल माता-पिता से अस्पष्टता प्राप्त करने के कारण पाठ दिखाई नहीं देता है।
समाधान ------------------- >>>>>>
एचटीएमएल
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>सीएसएस
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}आउटपुट:
पाठ पृष्ठभूमि के समान रंग के साथ दिखाई देता है क्योंकि div पारदर्शी div में नहीं है
प्रश्न यह परिभाषित नहीं करता था कि पृष्ठभूमि एक रंग है या एक छवि है, लेकिन चूंकि @Bowski पहले से ही रंगीन पृष्ठभूमि के लिए उत्तर दे चुका है, नीचे छवियों के लिए एक हैक है:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');इस तरह आप अपनी अस्पष्टता के रंग में हेरफेर कर सकते हैं और यहां तक कि अच्छा ढाल प्रभाव भी जोड़ सकते हैं।
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}<div class="wrapper">
<h1>Question 5770341</h1>
</div>ऐसा लगता है कि display: blockतत्वों को display: inlineमाता-पिता से अस्पष्टता नहीं मिलती है ।
शायद इसलिए कि यह अवैध मार्कअप है और ब्राउज़र चुपके से उन्हें अलग कर रहा है? क्योंकि स्रोत ऐसा नहीं दिखा रहा है। क्या मैं कुछ भूल रहा हूँ?
उपरोक्त उत्तर मेरे लिए जटिल लगते हैं, इसलिए मैंने यह लिखा:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>kb-mask-overlayयह आपके (अस्पष्टता) माता-पिता है, pop-upयह आपके (कोई अस्पष्टता) बच्चे हैं। आपकी साइट के बाकी सब कुछ नीचे है।
कोई एक आकार फिट-सभी दृष्टिकोण नहीं है, लेकिन एक चीज जो मुझे विशेष रूप से उपयोगी मिली वह एक दिव्यांग बच्चों के लिए अस्पष्टता निर्धारित कर रही है, केवल उस एक को छोड़कर, जिसे आप पूरी तरह से दृश्यमान रखना चाहते हैं। कोड में:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>और सीएसएस:
div.parent > div:not(.child1){
opacity: 0.5;
}यदि आपके पास माता-पिता पर पृष्ठभूमि रंग / चित्र हैं, तो आप अल्फा फिल्टर लागू करके आरजीबीए और पृष्ठभूमि-छवि के साथ रंग अस्पष्टता को ठीक करते हैं
यदि आपको एक छवि को पारदर्शी पृष्ठभूमि के रूप में उपयोग करना है, तो आप एक छद्म तत्व का उपयोग करके इसके चारों ओर काम करने में सक्षम हो सकते हैं:
एचटीएमएल
<div class="wrap">
<p>I have 100% opacity</p>
</div>सीएसएस
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}मेरा जवाब स्थिर अभिभावक-बच्चे के लेआउट के बारे में नहीं है, एनिमेशन के बारे में है।
मैं आज एक svg डेमो कर रहा था, और मुझे div के अंदर रहने के लिए svg की आवश्यकता थी (क्योंकि svg माता-पिता की दिव्य चौड़ाई और ऊंचाई के साथ बनाया गया है, चारों ओर के रास्ते को चेतन करने के लिए), और svg पाथ एनीमेशन के दौरान अदृश्य होने के लिए इस पैरेंट div की आवश्यकता है (और फिर इस div को माना जाता था animate opacity from 0 to 1, यह सबसे महत्वपूर्ण हिस्सा है)। और क्योंकि माता पिता के साथ opacity: 0मेरे svg छुपा था, मैं इस visibilityविकल्प के साथ हैक के साथ आया (बच्चे के साथ visibility: visibleमाता-पिता के अंदर देखा जा सकता है visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}और फिर, js में, आप .invisibleटाइमआउट फ़ंक्शन के साथ कक्षा को हटाते हैं , .opacity-zeroवर्ग जोड़ते हैं , लेआउट को ट्रिगर करते हैं जैसे कुछ whatever.style.top;और .opacity-zeroकक्षा को हटाते हैं ।
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);इस डेमो को देखने के लिए बेहतर है http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
मैक पर आप अपने .css में डालने से पहले अपनी .png छवि पर रखी गई सफेद आयत पर अस्पष्टता लागू करने के लिए पूर्वावलोकन संपादक का उपयोग कर सकते हैं ।
1) छवि
लोगो
2) के चारों ओर छवि एक आयत बनाएं
लोगो के आसपास Rectanle
3) सफेद करने के लिए बदलें पृष्ठभूमि रंग
आयत सफेद कर दिया
4) आयत अस्पष्टता को समायोजित करें
अपारदर्शी छवि
अपारदर्शिता के साथ बच्चे को अपारदर्शिता 1.0 असाइन करें:
div > div { opacity: 1.0 }उदाहरण:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>तालिका बनाने (या कुछ) बनाने की कोशिश कर रहे अन्य लोगों के लिए अस्पष्टता का उपयोग करके एक पंक्ति पर ध्यान केंद्रित करना चाहिए। @Blowski ने कहा कि रंग का उपयोग नहीं अस्पष्टता। इस फिडेल को देखें: http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
opacitydisplay: noneइस अर्थ में एक सा है।