4 replies to this topic

[Michael.]

Witam, w mini poradniku jak utworzyć przezroczystość, krycie w CSS3 dla Webkit, Mozilla i Internet Explorer (od wersji 9).
Zacznijmy od zrzutu ekranu ukazującego ten efekt:



Nasz CSS, wygląda następująco:

#krycie {
background:red;  // odpowiada za tło
opacity:0.5;         // odpowiada za przezroczystość, 1 - nieprzezroczysty, 0 - przezroczysty na max
width:500px;       // szerokość
margin:15px;      // odciągniecie od marginesów
padding:10px;      // wypełnienie do środka napisu
color:white;         // color napisu
}

Zatem HTML musi wyglądać tak:

<div id="krycie">Tutorial AMXX.PL</div>

To wszystko na ten tutorial, dziękuje

[thestig]

Co prawda odkopuję temat ale... można dodać przezroczystość np. tylko na tło

background: rgba(255,0,0,0.5);

wtedy tekst i wszystko co znajduje się w danym kontenerze jest czytelniejsze.

 

Pozdrawiam

TheStig

[GiboneKPL]

Też odkopie lekko..

Można także używać zaokrąglenia do setnych czyli:

opacity: 0.57;

[andrzejcygan]

Ja większość rzeczy badam w chromie i tam edytuje

[pilus]

Jak się che można określić stopień przeroczystości background: rgba(255,0,0,200),  nie musi być jednolita, można zrobić efekt stopniowego przejścia.

Edited by pilus, 17.07.2015 05:53.