nisfarm.ru

Vlastnost css `transparentnost `je snadný způsob, jak zvýšit zajímavost designu stránky

Dnes se vytváření návrhu webových stránek stává skutečným uměním. Není to jen sada prvků stránky určité barvy a velikost, písma různé styly a tematické kresby. Aby bylo místo odlišné od ostatních, přilákat pozornost návštěvníků a směrovat je k těmto nebo jiným prvkům, používají se obrovské množství metod a nástrojů. Mezi nimi je velmi populární vlastnost css - průhlednost. Tato technika je spíše módní a efektivní, a proto se často používá. Transparentnost můžete zobrazit na různých stránkách - například text, celý blok nebo obrázek. To je také dosaženo mnoha způsoby. Zvažme je níže.

css průhlednost

Parametry pro definování průhlednosti prvků

Parametry, které umožňují regulovat stupeň průhlednosti prvků, jsou několik. Používají se podle konkrétních účelů, stejně jako prohlížeč, podle kterého je návrh "upraven". Patří sem následující vlastnosti:

  • opacita;
  • filtr;
  • PNG obrázek jako pozadí.

Hodnoty vlastností css "transparentnosti" se mění takto: čím větší je číslice, tím nižší je úroveň průhlednosti prvku. V neprůhlednosti se liší od 0 do 1, ve filtru - od 10 do 100. A druhá se používá pro prohlížeč Interet Explorer a pro všechny ostatní se používá vlastnost opacity.




transparent div css

Transparentnost obrazu (změna)

Začneme tím, když se objeví průhlednost, když umístíte ukazatel myši nad prvek kurzor myši.

Zvažte, jak nastavit průhlednost obrázku. CSS nabízí dvě možnosti. Pro tento účel je nutné ji zapsat přímo do kódu html dokumentu následovně:

    1. Určete cestu k obrázku.
    2. Určete nastavení průhlednosti při pohybu kurzorem a ne. K tomu použijeme vlastnosti onmouseover a onmouseout, ve kterých nastavíme hodnoty opacity a filtru.

Stejné vlastnosti lze zapsat do css dokumentu a do zdrojového kódu přidat pouze odkaz. Výsledky jsou stejné.

transparentní obrázky css

Transparentnost textu a bloků stránek

Co se týče textu nebo bloku (průhlednost div), css navrhuje použití možnosti podobné vytvoření transparentnosti obrazu, tj. Pomocí připojeného css souboru, ve kterém budou nastaveny požadované parametry. Můžete jít jednodušeji. Při zadávání stylů bloku stylu div nebo p textu předepište následující html kód pro prvky onmouseover a onmouseout. Obě možnosti fungují a poskytují požadovaný výsledek.

Konstanta průhlednosti

V některých případech je třeba průběžně specifikovat průhlednost objektu, konstrukčního prvku nebo textu. V této situaci je řešení dokonce jednodušší, než když umístíte kurzor myši.

Pro prvek css je průhlednost dána následujícím kódem. V bloku div štítu přidáváme hodnoty pro pozadí (například # ff8800), opacitu (např. 0,5), stejně jako šířku a polstrování.

Pro obrázek v kódu zadáme hodnoty opacity a filtru a také zadáme cestu k obrázku.

transparentnost textu

RGBA metoda

Existují další možnosti pro použití této vlastnosti css: průhlednost lze aplikovat na barvu pozadí libovolného konstrukčního prvku. Pro tento účel se používá metoda RGBA. První tři písmena označují primární barvy (červená, plná, modrá) a poslední jedna - alfa, která nastavuje úroveň průhlednosti. Pomocí formátu RGBA předepište stupeň průhlednosti a označte ji v poslední číslici. Je to například: pozadí: rgba (240,2,33,0,4035).

Závěr

Použitím jednoduché, ale efektivní vlastnosti css "průhlednosti" v průběhu práce na designu lokality můžete své prvky lépe a vidět, s minimálním úsilím. Popsané možnosti pro určení charakteristik průhlednosti vám v tom pomohou.

Sdílet na sociálních sítích:

Podobné
© 2021 nisfarm.ru