CSS sovrapposto 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>

ciò che è la realtà calcolato trasparenza delle div2? Sono confuso. E 'un numero sconosciuto che non è 0,3 + 0,3 o 0,3 + 0,3 * 0,3

fonte

2015-06-23 jinxin ni

Sembra 0.51, ma non ho idea di come calcolarlo: http://jsfiddle.net/rf3p1yLg/1/ – passatgt

controllare la console degli sviluppatori? –

Dal momento che è stato applicato l'opacità in div{} allora questo sarebbe .3 per #div1{} e .3 * .3 = .09 per #div2{} come # div1 ha valore di opacità .3 e # div2 anche usa l'opacità ma al momento è in possesso di .3 quindi verrà moltiplicato per i bambini.

fonte

2015-06-23 19:07:17

L'ho provato in Photoshop e sono riuscito a ottenere lo stesso colore usando il 51% come opacità – passatgt

Hai provato a utilizzare opacity .3 sul primo livello e .3 sul secondo livello? Questo sarà simile a come hai scritto in CSS. Ma efficacemente, il 51% potrebbe trovare il colore anche come css. –

https://cloudup.com/cgZGi_Ilw9u – passatgt

sua

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

Prima di tutto bisogna aggiungere sovrapposizione valori di trasparenza, e sottrarre la loro moltiplicazione. Perché? Non lo so. Non so come faccio a saperlo, è solo una di quelle cose come la spaziatura delle lettere da PhotoShop a CSS, È necessario dividere il valore di PS da 1000, e ottieni il valore in ems. Ci scusiamo per l'offtopic.

fonte

2015-06-23 19:58:40

La somma dei canali alfa può essere calcolato come:

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

Per ulteriori spiegazioni, vedi Alpha Compositing @ wikipedia, che elenca la formula come:

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

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

Questo è essenzialmente la stessa formula used by Bogdan Kuštan e può anche essere trovato in this answer by bwoebi.

fonte

2015-06-23 20:15:49 showdev

Molto interessante. Grazie per averlo indicato. –

risposta davvero chiara. ti aiuta moltissimo grazie mille –

@jinxinni Se questa risposta ha risolto il problema, ti preghiamo di accettarlo per poter chiudere il problema. Si prega di consultare [Cosa devo fare quando qualcuno risponde alla mia domanda?] (Http://stackoverflow.com/help/someone-answers) –

CSS sovrapposto rgba transpanrency

risposta

Problemi correlati