←  Tutoriale

AMXX.pl: Support AMX Mod X i SourceMod

»

CSS
Przezroczystość

  • +
  • -
Michael. - zdjęcie Michael. 26.08.2012

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:

Dołączona grafika

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 :)
Odpowiedz

  • +
  • -
thestig - zdjęcie thestig 29.06.2013

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

Odpowiedz

  • +
  • -
GiboneKPL - zdjęcie GiboneKPL 08.01.2014

Też odkopie lekko..

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

opacity: 0.57;
Odpowiedz

  • +
  • -
andrzejcygan - zdjęcie andrzejcygan 15.01.2014

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

Odpowiedz

  • +
  • -
pilus - zdjęcie pilus 17.07.2015

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.


Użytkownik pilus edytował ten post 17.07.2015 05:53
Odpowiedz