CSS nakładka 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>

co jest rzeczywiście obliczana przejrzystości Div2? Jestem zdezorientowany. Jest to nieznany numer, który nie wynosi 0,3 + 0,3 lub 0,3 + 0,3 * 0,3

Źródło

2015-06-23 jinxin ni

Wygląda to na 0.51, ale nie mam pojęcia, jak to obliczyć: http://jsfiddle.net/rf3p1yLg/1/ – passatgt

sprawdź swoją konsolę programisty? –

Od złożyłeś krycie w div{} wtedy byłoby to .3 dla #div1{} i .3 * .3 = .09 dla #div2{} jako # Div1 ma wartość krycia .3 i # Div2 także używaj nieprzezroczystości, ale obecnie jest w posiadaniu .3, więc będzie mnożona dla dzieci.

Źródło

2015-06-23 19:07:17

Próbowałem go w Photoshopie i udało mi się uzyskać ten sam kolor, używając 51% jako nieprzezroczystości. – passatgt

Czy próbowałeś użyć krycie .3 na pierwszej warstwie i .3 na drugiej warstwie? Będzie to podobne, jak pisałeś w css. Ale efektywnie, 51% może również znaleźć kolor jako css. –

https://cloudup.com/cgZGi_Ilw9u – passatgt

jego

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

najpierw trzeba dodać nakładających wartości przezroczystości i odejmowanie ich namnażanie. Czemu? Nie wiem Nie wiem, skąd to wiem, to tylko jedna z tych rzeczy, jak odstępy między literami z PhotoShop do CSS, musisz podzielić wartość PS z 1000, a otrzymasz wartość w ems. Przepraszam za offtopic.

Źródło

2015-06-23 19:58:40

suma kanałów alfa może być obliczona jako:

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

Dalsze objaśnienia patrz Alpha Compositing @ wikipedia, co wymieniono następujący wzór:

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

lub

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

Jest to zasadniczo ten sam wzór used by Bogdan Kuštan i może być również w this answer by bwoebi.

Źródło

2015-06-23 20:15:49 showdev

Bardzo interesujące. Dzięki za wskazanie tego. –

Naprawdę jasna odpowiedź. bardzo pomaga bardzo dziękuję –

@jinxinni Jeśli ta odpowiedź rozwiązała Twój problem, zaakceptuj go, aby zamknąć problem. Zobacz [Co powinienem zrobić, gdy ktoś odpowiada na moje pytanie?] (Http://stackoverflow.com/help/someone-answers) –

CSS nakładka rgba transpanrency

Odpowiedz

Powiązane problemy