स्टैक्ड अर्ध-पारदर्शी बक्से का रंग ऑर्डर पर निर्भर करता है?

Question

दो स्टैक्ड अर्ध-पारभासी बक्से का अंतिम रंग ऑर्डर पर क्यों निर्भर करता है?

मैं इसे कैसे बना सकता हूं ताकि मुझे दोनों मामलों में एक ही रंग मिले?

.a {
  background-color: rgba(255, 0, 0, 0.5)
}

.b {
  background-color: rgba(0, 0, 255, 0.5)
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

Comments

मैं इस सवाल का जवाब नहीं जानता, लेकिन यही बात फोटोशॉप में भी होती है और यह कुछ ऐसा है जिसे मैंने सालों से कंप्यूटर कलर थ्योरी का हिस्सा माना है। मैं देखने के लिए चारों ओर देखूंगा कि क्या मुझे कोई और जानकारी मिल सकती है।

— याहसेव्स

इसके लायक होने के लिए, वास्तविक जीवन में वही चीज़ होती है जो 100% पारदर्शी नहीं होती है और सामने से जलाया जाता है। सामने की वस्तु से अधिक प्रकाश आपकी आंख तक जाता है, इस प्रकार इसका रंग अंतिम रंग पर अधिक प्रभाव डालता है, भले ही दोनों में 50% पारदर्शिता हो।

— जपा

@YAHsaves: 0 और 100 का औसत 50 (चरण 1) है। 50 और 150 का औसत 100 (चरण 2) है। इसकी तुलना करें: 150 और 0 का औसत 75 (चरण 1) है। 75 और 100 का औसत 87.5 (चरण 2) है। मुद्दा यह है कि तीनों नंबरों को सही तरीके से नहीं तौला जा रहा है। एक ही समय में सभी नंबरों के आधार पर एक औसत गणना करने की आवश्यकता है; आप केवल चरणबद्ध तरीके से औसत चरण की गणना नहीं कर सकते। (ध्यान दें कि औसत गणना आवश्यक रूप से 50% पारदर्शिता गणना है। विभिन्न पारदर्शिता स्तरों के लिए गणना में परिवर्तन होता है, लेकिन सिद्धांत समान रहता है)

— '10

सबक सीखा: 'मिक्स-ब्लेंड-मोड: गुणा' के साथ मुझे स्टैकिंग ऑर्डर से स्वतंत्र एक रंग मिलेगा - यही वह है जो मैं शुरू में देख रहा था! मुझे लगता है कि @Moffens उत्तर उसी समस्या का सामना करने वाले किसी अन्य उपयोगकर्ता के लिए सबसे उपयोगी है। लेकिन तमनी अफिफ़ की व्याख्या वास्तव में मेरे सवाल पर लागू होती है और यह वर्णन करती है कि HTML दूसरे तरीके से व्यवहार करती है (यह अर्ध-पारदर्शी फ़ॉइल के माध्यम से भौतिक प्रकाश प्रसार की नकल करता है), इसलिए ग्रीन टिक उसके पास जाता है।

— rmv

Answer 1

केवल इसलिए कि दोनों ही मामलों में रंगों का संयोजन समान नहीं है, क्योंकि शीर्ष परत की अपारदर्शिता नीचे की परत के रंग को कैसे प्रभावित करती है ।

पहली स्थिति के लिए, आपको 50% नीला और 50% पारदर्शी ऊपरी परत में दिखाई देता है। पारदर्शी भाग के माध्यम से, आप नीचे की परत में 50% लाल रंग देखते हैं (इसलिए हम केवल कुल लाल का 25% ही देखते हैं )। दूसरे मामले के लिए एक ही तर्क ( 50% लाल और 25% नीला ); इस प्रकार आपको अलग-अलग रंग दिखाई देंगे क्योंकि दोनों मामलों के लिए हमारे पास समान अनुपात नहीं है।

इससे बचने के लिए आपको अपने दोनों रंगों के लिए समान अनुपात होना चाहिए।

बेहतर उदाहरण के लिए यहां एक उदाहरण दिया गया है और दिखाया गया है कि हम एक ही रंग कैसे प्राप्त कर सकते हैं

शीर्ष परत (आंतरिक अवधि) में हमारे पास 0.25अस्पष्टता होती है (इसलिए हमारे पास पहले रंग का 25% और पारदर्शी का 75%) तब नीचे की परत (बाहरी अवधि) के लिए हमारे पास 0.333अस्पष्टता होती है (इसलिए हमारे पास 1/3 परत है 75% = 25% रंग और शेष पारदर्शी है)। दोनों परतों (25%) में हमारा समान अनुपात है, इसलिए हम परतों के क्रम को उलटते हुए भी एक ही रंग देखते हैं ।

.a {
  background-color: rgba(255, 0, 0, 0.333)
}

.b {
  background-color: rgba(0, 0, 255, 0.333)
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.25)
}
.b > .a {
  background-color: rgba(255, 0, 0, 0.25)
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

साइड नोट के रूप में, सफेद पृष्ठभूमि भी रंगों के प्रतिपादन को प्रभावित कर रही है। इसका अनुपात 50% है जो 100% (25% + 25% + 50%) का तार्किक परिणाम देगा।

आप यह भी देख सकते हैं कि हमारे दोनों रंगों के लिए समान अनुपात होना संभव नहीं होगा यदि शीर्ष परत की अपारदर्शिता बड़ी है 0.5क्योंकि पहले वाले के पास 50% से अधिक होगा और दूसरे के लिए यह 50% से कम रहेगा। एक:

.a {
  background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/
}

.b {
  background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/
}
.b > .a {
  background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

सामान्य तुच्छ मामला तब होता है जब शीर्ष परत होती है opacity:1जो 100% के अनुपात के साथ शीर्ष रंग बनाती है; इस प्रकार यह एक अपारदर्शी रंग है।

---

एक और अधिक सटीक और सटीक व्याख्या यहाँ के लिए रंग हम दोनों परतों के संयोजन के बाद देखने के आकलन के लिए उपयोग सूत्र है ^{रेफरी} :

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF हमारा अंतिम रंग है। ColorT / ColorB क्रमशः ऊपर और नीचे के रंग हैं। opacityT / opacityB क्रमशः प्रत्येक रंग के लिए परिभाषित शीर्ष और नीचे के स्थान हैं:

factorइस सूत्र द्वारा परिभाषित किया गया है OpacityT + OpacityB*(1 - OpacityT)।

यह स्पष्ट है कि यदि हम दो परतों को factorबदलेंगे तो यह नहीं बदलेगी (यह स्थिर रहेगी) लेकिन हम स्पष्ट रूप से देख सकते हैं कि प्रत्येक रंग के लिए अनुपात बदल जाएगा क्योंकि हमारे पास एक ही गुणक नहीं है।

हमारे प्रारंभिक मामले के लिए, दोनों अपारदर्शिता हैं 0.5इसलिए हमारे पास होगा:

ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor

जैसा ऊपर बताया गया है, शीर्ष रंग में 50% ( 0.5) का अनुपात है और नीचे वाले का 25% ( 0.5*(1-0.5)) अनुपात है, इसलिए परतों को स्विच करने से ये अनुपात भी बदल जाएंगे; इस प्रकार हम एक अलग अंतिम रंग देखते हैं ।

अब अगर हम दूसरे उदाहरण पर विचार करें तो हमारे पास होगा:

ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor

इस मामले में हमारे पास 0.25 = 0.333*(1 - 0.25)दो परतों को स्विच करने का कोई प्रभाव नहीं होगा; इस प्रकार रंग समान रहेगा।

हम तुच्छ मामलों की भी स्पष्ट रूप से पहचान कर सकते हैं:

• जब शीर्ष परत opacity:0सूत्र के बराबर होती हैColorF = ColorB
• जब शीर्ष परत opacity:1सूत्र के बराबर होती हैColorF = ColorT

Comments

@ क्रिसहैपी समस्या का समाधान नहीं कर रहा है;) मैं समझा रहा हूँ .. स्पष्टीकरण कभी-कभी तय से बेहतर होता है

— तैमनी आफिफ़

समस्या तब भी होती है जब आप डिव का एक-दूसरे से बाहर ले जाते हैं, और स्थिति: उन्हें स्टैक करने के लिए पूर्ण।

— YAHsaves

@YAHsaves समस्या तब भी होगी जब हम कई पृष्ठभूमि या किसी भी चीज़ का उपयोग करते हैं जो दो रंगों को एक-दूसरे के ऊपर बनाते हैं (पूर्ण स्थिति का उपयोग करते हुए या नहीं);)

— तैमनी Afif

यदि आप एक TLDR जोड़ना चाहते हैं, तो यह होगा कि वे additive के बजाय गुणात्मक हैं।

— कैरामिरियल

@Caramiriel: "गुणक" अभी भी यह नहीं बताएगा कि ऑपरेशन कम्यूटेटिव क्यों नहीं है।

— एरिक डुमिनील

Answer 2

आप सीएसएस संपत्ति का उपयोग कर सकते हैं, mix-blend-mode : multiply (सीमित ब्राउज़र समर्थन )

.a {
  background-color: rgba(255, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
  mix-blend-mode: multiply;
}

.c {
  position: relative;
  left: 0px;
  width: 50px;
  height: 50px;
}

.d {
  position: relative;
  left: 25px;
  top: -50px;
  width: 50px;
  height: 50px;
}

<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

<div class="c a"></div>
<div class="d b"></div>

<div class="c b"></div>
<div class="d a"></div>

Comments

बस इस सूची से किसी भी रंग सम्मिश्रण मोड के बारे में जो "कम्यूटेटिव" है वह चाल चलेगा।

— सलमान ए

दिलचस्प है, यह क्रोम के साथ काम करता है लेकिन एज के साथ (नवीनतम विंडोज 10 अपडेट के रूप में) नहीं।

— होंग ओई

@rmv आप ओवरले / सामान्य के अलावा और कुछ क्यों उम्मीद करेंगे? यदि आप एक लाल बॉक्स के सामने एक अपारदर्शी नीले बॉक्स को स्थिति देते हैं तो अपेक्षित रंग क्या है ? यह लाल या नीले और लाल रंग के बजाय नीला होगा।

— सलमान ए

@Moffen सही उत्तर, लेकिन क्या आप इस बात के लिए स्पष्टीकरण जोड़ सकते हैं कि यह काम क्यों करता है, और मूल कोड क्यों नहीं?

— बरगी

@rmv: "सामान्य" मिक्सिंग मोड जो सबसे अधिक बारीकी से नकल करता है, वह वास्तव में पेंट मिक्सिंग है। उदाहरण के लिए, यदि आप कुछ सफ़ेद पेंट लेते हैं, तो उसका आधा हिस्सा लाल रंग के पेंट से बदलें और उसके बाद उसके आधे गुलाबी रंग को नीले रंग से बदल दें, आप नीले रंग का बैंगनी (25% सफेद, 25% लाल, 50%) नीला)। यदि आप एक ही सफेद पेंट के साथ शुरू करते हैं, लेकिन पहले इसे नीले रंग के साथ आधा और फिर लाल रंग के साथ आधा परिणाम देते हैं, तो आप इसके बजाय एक लाल बैंगनी (25% सफेद, 25% नीला, 50% लाल) के साथ समाप्त करेंगे ।

— इल्मरी करोनें

Answer 3

आप निम्नलिखित क्रम में तीन रंगों का मिश्रण कर रहे हैं:

• rgba(0, 0, 255, 0.5) over (rgba(255, 0, 0, 0.5) over rgba(255, 255, 255, 1))
• rgba(255, 0, 0, 0.5) over (rgba(0, 0, 255, 0.5) over rgba(255, 255, 255, 1))

और आपको अलग-अलग परिणाम मिलते हैं। इसका कारण यह है कि अग्रभूमि का रंग सामान्य मिश्रण मोड ^1,2 का उपयोग करके पृष्ठभूमि रंग के साथ मिश्रित है जो कि कम्यूटेटिव ³ नहीं है । और चूंकि यह कम्यूटेटिव नहीं है, इसलिए स्वैपिंग फोरग्राउंड और बैकग्राउंड कलर अलग-अलग परिणाम देंगे।

¹ सम्मिश्रण मोड एक ऐसा फ़ंक्शन है जो अग्रभूमि और पृष्ठभूमि रंग को स्वीकार करता है, कुछ सूत्र लागू करता है और परिणामी रंग देता है।

² दो रंगों, पृष्ठभूमि और अग्रभूमि को देखते हुए, सामान्य मिश्रण मोड केवल अग्रभूमि रंग लौटाता है।

³ एक ऑपरेशन सराहनीय है अगर ऑपरेंड्स के क्रम को बदलने से परिणाम नहीं बदलता है जैसे कि इसके अलावा कम्यूटेटिव (1 + 2 = 2 + 1) है और घटाव (1 - 2 - 2 - 1) नहीं है।

समाधान एक सम्मिश्रण मोड का उपयोग करना है जो कि कम्यूटेटिव है: वह जो किसी भी क्रम में एक ही रंग के जोड़े के लिए एक ही रंग देता है (उदाहरण के लिए गुणा मिश्रण मोड, जो दोनों रंगों को गुणा करता है और परिणामी रंग को वापस करता है; या मिश्रण मोड को गहरा करता है, जो वापस लौटता है दोनों का गहरा रंग)।

$(function() {
  $("#mode").on("change", function() {
    var mode = $(this).val();
    $("#demo").find(".a, .b").css({
      "mix-blend-mode": mode
    });
  });
});

#demo > div {
  width: 12em;
  height: 5em;
  margin: 1em 0;
}

#demo > div > div {
  width: 12em;
  height: 4em;
  position: relative;
  top: .5em;
  left: 4em;
}

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="mode">
  <optgroup label="commutative">
    <option>multiply</option>
    <option>screen</option>
    <option>darken</option>
    <option>lighten</option>
    <option>difference</option>
    <option>exclusion</option>
  </optgroup>
  <optgroup label="non-commutative">
    <option selected>normal</option>
    <option>overlay</option>
    <option>color-dodge</option>
    <option>color-burn</option>
    <option>hard-light</option>
    <option>soft-light</option>
    <option>hue</option>
    <option>saturation</option>
    <option>color</option>
    <option>luminosity</option>
  </optgroup>
</select>

<div id="demo">
  <div class="a">
    <div class="b"></div>
  </div>
  <div class="b">
    <div class="a"></div>
  </div>
</div>

---

पूर्णता के लिए, यहां कंपोजिट रंग की गणना करने का सूत्र दिया गया है:

αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

साथ में:

Cs: अग्रभूमि रंग
αs का रंग मान: अग्रभूमि रंग का अल्फा मान
Cb: पृष्ठभूमि रंग
αb का रंग मान: पृष्ठभूमि रंग
B का अल्फा मान : सम्मिश्रण फ़ंक्शन

Answer 4

क्या होता है, इसकी व्याख्या के लिए, तमनी अफिफ़ का जवाब देखें।
एक वैकल्पिक समाधान के रूप में, आप एक स्पैन ले सकते हैं, aउदाहरण के लिए, इसे स्थिति दें और यदि यह अंदर है तो इसे एक कम जेड-इंडेक्स दें b। तब स्टैकिंग हमेशा समान होगा: पहली पंक्ति में bशीर्ष पर खींचा जाता है a, और दूसरे में aनीचे खींचा जाता है b।

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

.b .a {position:relative; z-index:-1;}

<span class="a"><span class="b">     Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>