मिश्रण-मिश्रण-मोड का उपयोग कैसे करें, लेकिन यह बाल तत्वों को प्रभावित नहीं करता है?

Question

ठीक है, तो मैं एक WordPress साइट और विचाराधीन पृष्ठ के निर्माण कर रहा हूँ यहाँ देखा जा सकता: http://test.pr-tech.com/power-line-markers/

मुद्दा मैं कर रहा हूँ है कि मैं बनाने के लिए मेरी div कंटेनर में से एक के लिए मिश्रण मिश्रण मोड का उपयोग कर रहा पृष्ठभूमि पर 'हल्का' मिश्रण का प्रयोग करें।

यह पूरी तरह से काम करता है, लेकिन मेरे पास यह मुद्दा है कि दुर्भाग्यवश कंटेनर (यानी पाठ) के अंदर बाल तत्व भी मिश्रण मोड को विरासत में ले रहे हैं, और इसलिए यह मेरा टेक्स्ट 'मिश्रण' भी बना रहा है, जो ' टी जो मैं चाहता हूं (मैं चाहता हूं कि टेक्स्ट में कोई मिश्रण मोड न हो)।

फिर भी, आप कोड देख सकते हैं मैं नीचे का उपयोग कर रहा:

#category-intro-text { 
    padding: 0.625em 0.938em; 
    mix-blend-mode: lighten; 
    background-color: rgba(220, 235, 255, 0.8); repeat; 
} 

मैं की तरह कुछ लागू करने का प्रयास 'मिश्रण मिश्रण मोड: कोई नहीं;' पाठ के लिए, लेकिन यह काम नहीं करता है।

मैंने इस सुंदरता के उत्तर के लिए Google की खोज की है, लेकिन हां, इस विषय पर बहुत कुछ नहीं है (यदि कुछ भी हो)।

Answer 1

मैंने सोचा कि मैंने isolation संपत्ति के साथ काम किया है, लेकिन नहीं। मेरे पास इस मुद्दे के समाधान के लिए बहुत भाग्य नहीं था।

मैं तुम्हें इस पुराने चाल इस्तेमाल कर सकते हैं लगता है: http://jsfiddle.net/cwdtqma7/

HTML:

<div class="intro-wrap"> 
    <div class="intro-background"></div> 
    <div class="intro-content"> 
     <h1>Hello</h1> 
     <p>Welcome to the thing.</p> 
    </div> 
</div> 

सीएसएस:

body { 
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat; 
    background-size: 800px; 
    font-family: sans-serif; 
} 
.intro-wrap { 
    position: relative; 
} 
.intro-background { 
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png'); 
    mix-blend-mode: lighten; 
    padding: 32px; 
    width: 300px; 
    height: 300px; 
} 
.intro-content { 
    position: absolute; 
    top: 0; 
    left: 32px; 
} 

Answer 2

मुझे पता है कि आप इस के लिए कहा कि कुछ समय पहले, लेकिन मैं खेल रहा किया गया है आज एक ही मुद्दे के साथ और इसे इस तरह ठीक करने में कामयाब रहे।

#category-intro-text div के अंदर सामग्री को लपेटें जो अपेक्षाकृत स्थित एक अन्य div के साथ है। आखिरकार, आप शैली को अपने सीएसएस में जोड़ना चाहेंगे और इनलाइन के रूप में इनलाइन नहीं करना चाहते हैं।

<div id="category-intro-text"> 
    <div style="position: relative;"> 
     <h1>Power Line Markers</h1> 
     Etc. Etc. 
    </div> 
</div> 

तब पृष्ठभूमि रंग को हटाने और सम्मिश्रण जानकारी आप #category-intro-text div के लिए स्टाइलशीट में मिल गया है। आप के साथ खत्म हो जाना चाहिए था ...

#category-intro-text { 
    padding: 0.625em 0.938em; 
    position: relative; 
} 

अंत में, मिश्रित परत जोड़ने के लिए एक ::before छद्म तत्व का उपयोग करें।

#category-intro-text::before { 
    content: ""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(220, 235, 255,0.8); 
    mix-blend-mode: lighten; 
} 

उम्मीद है कि यह करेगा। यह एक गुणा परत के साथ मेरे लिए पूरी तरह से काम कर रहा है।

संपादित करें: Here is a Fiddle पिछले उत्तर से फोर्क किया गया।

Answer 3

क्यों उस उद्देश्य के लिए मिश्रण मिश्रण मोड का उपयोग कब वहां पृष्ठभूमि मिश्रण मोड (शायद आप पहले से ही है कि कोशिश की है!)। दरअसल मिश्रण-मिश्रण-मोड उस तत्व को मिश्रित करता है जिसे इसे नीचे के सब कुछ के साथ लागू किया जाता है। दूसरी ओर पृष्ठभूमि पृष्ठभूमि पर लागू पृष्ठभूमि-मिश्रण-मोड केवल उस पृष्ठभूमि के साथ मिश्रित होता है जो उसके नीचे है।

आप इस-

.outer-wrapper { 
background: url(<url>), #fb3; 
background-blend-mode: exclusion; 
padding: 2em 4em; 
} 

.inner-text { 
/**styling of you text***/ 
}