सीएसएस ओवरले RGBA transpanrency

<!doctype> 
<html> 
<head> 
    <style> 
     div { 
      background:rgba(0,255,255,0.3); 
     } 
     #div1 { 
      width:300px; 
      height:300px;   
     } 
     #div2 { 
      width:200px; 
      height:200px;   
     } 
    </style> 
</head> 
<body> 
    <div id="div1"><div id="div2"></div></div><br/> 
</body>

क्या वास्तव में DIV2 की पारदर्शिता गणना की जाती है? मैं उलझन में हूं। यह एक अज्ञात संख्या 0.3 + 0.3 या 0.3 नहीं है कि + 0,3 * 0,3

स्रोत

2015-06-23 jinxin ni

0.51 की तरह दिखता है, लेकिन मुझे नहीं पता कि इसकी गणना कैसे करें: http://jsfiddle.net/rf3p1yLg/1/ – passatgt

अपने डेवलपर कंसोल की जांच करें? –

जब से तुम div{} में अस्पष्टता आवेदन किया है तो यह #div2{} के रूप में # div1 के लिए #div1{} के लिए .3 और .3 * .3 = .09 होगा अस्पष्टता मूल्य .3 और # DIV2 भी है अस्पष्टता का उपयोग करें लेकिन वर्तमान में .3 धारण कर रहा है, इसलिए इसे बच्चों के लिए गुणा किया जा रहा है।

स्रोत

2015-06-23 19:07:17

मैंने फ़ोटोशॉप में इसे आजमाया और मैं अस्पष्टता – passatgt

के रूप में 51% का उपयोग कर एक ही रंग प्राप्त करने में सक्षम था क्या आपने पहली परत पर ओपेसिटी .3 का उपयोग करने की कोशिश की थी और .3 दूसरी परत पर? यह सीएसएस में लिखा जैसा ही होगा। लेकिन प्रभावी रूप से, 51% रंग को सीएसएस के रूप में भी मिल सकता है। –

https://cloudup.com/cgZGi_Ilw9u – passatgt

अपने

(0,3 + 0,3) - (0,3 * 0,3) = 0,51

सबसे पहले आप पारदर्शिता मूल्यों ओवरलैपिंग जोड़ने के लिए, और उनके गुणा घटाना की जरूरत है। क्यूं कर? मुझे नहीं पता। मुझे घटना नहीं है कि मैं इसे कैसे जानता हूं, यह उन चीज़ों में से एक है जैसे फोटोशॉप से सीएसएस तक लेटर स्पेसिंग, आपको पीएस वैल्यू 1000 से विभाजित करने की जरूरत है, और आपको ems में मूल्य मिलता है। ऑफटॉप के लिए खेद है।

स्रोत

2015-06-23 19:58:40

अल्फा चैनलों की राशि के रूप में गणना की जा सकती:

alpha_top + alpha_bottom * (1 - alpha_top) =
0,3 + 0,3 * (1 - 0,3) =
0,3 + 0,3 * 0,7 =
0,3 + 0,21 =
0,51

अधिक विवरण के लिए, Alpha Compositing @ wikipedia देखते हैं, जो के रूप में सूत्र को सूचीबद्ध करता है:

$\alpha_o = \alpha_a + \alpha_b \left(1 - \alpha_a\right)$

या

$\alpha_o = 1 - (1 - \alpha_a) (1 - \alpha_b)$

यह अनिवार्य रूप से एक ही सूत्र used by Bogdan Kuštan है और यह भी this answer by bwoebi में पाया जा सकता।

स्रोत

2015-06-23 20:15:49 showdev

बहुत दिलचस्प है। इस पर ध्यान दिलाने के लिए धन्यवाद। –

वास्तव में स्पष्ट उत्तर। बहुत बहुत धन्यवाद –

@jinxinni यदि इस उत्तर ने आपकी समस्या हल की है, तो कृपया इस मुद्दे को बंद करने के लिए इसे स्वीकार करें। कृपया देखें [जब कोई मेरे प्रश्न का उत्तर देता है तो मुझे क्या करना चाहिए?] (Http://stackoverflow.com/help/someone-answers) –

सीएसएस ओवरले RGBA transpanrency

उत्तर

संबंधित मुद्दे