Vlastnosť CSS 3 nepriehľadnosť umožňuje sprehľadniť ten či onen prvok stránky.

Stupeň priehľadnosti prvku je určený hodnotou od 0 predtým 1 kde 0 - úplne transparentné 1 - nepriehľadné vôbec.. Napríklad hodnota 0.5 vlastnosti nepriehľadnosť aplikovaný na obrázok bude znamenať, že tento obrázok by mal byť priesvitný.





Transparentnosť










Transparentnosť v IE

Prehliadač internet Explorer nepodporuje vlastnosti nepriehľadnosť až do deviatej verzie má však vlastný filter, pomocou ktorého si nastavíte mieru priehľadnosti:

filter: alfa (nepriehľadnosť=50)

Význam nepriehľadnosť pre filter internetový prehliadač Prieskumník sa môže líšiť od 0 - úplne transparentné pre 100 - nepriehľadný





Transparentnosť v IE



Bloky tohto menu budú priesvitné aj v IE!


Domov
mapa stránok
Kúpte si slona
predať slona
Požičajte si slona

Predpony.

Na tomto by sa v zásade dala dokončiť kapitola o transparentnosti, ale rád by som vám povedal viac o tzv predpony predajcu.. títo súdruhovia nemajú veľa spoločného s touto kapitolou, ale ako sa budeme učiť CSS3, budeme sa s nimi stretávať čoraz častejšie a niekde sa o nich musíme porozprávať - ​​tak vám to poviem tu.

Predpony dodávateľov sú teda špeciálne predpony vlastností CSS, ktoré používajú prehliadače pre experimentálne vlastnosti, ktoré nie sú oficiálne súčasťou špecifikácie CSS.

Pamätáme si, že špecifikácia CSS 3 je stále vo vývoji a formálne vlastnosti opísané v tomto návode v prírode neexistujú, ale prehliadače ich už aktívne používajú na vlastné nebezpečenstvo a riziko.

Prečo na vlastné riziko? Áno, pretože je možné, že keď bude špecifikácia CSS 3 oficiálne schválená, vlastnosti v nej opísané sa budú svojou činnosťou líšiť od vlastností s rovnakým názvom, ktoré už prehliadače používajú. Poďme sa teda pozrieť na vývojárov špecifikácie CSS 3 na označenie vlastnosti nepriehľadnosť nie ako miera priehľadnosti bloku, ale napríklad ako jeho tieňovanie alebo blikanie (samozrejme píšem nezmysly), ktoré potom už zobrazia milióny nainštalované prehliadače pre ktoré nepriehľadnosť to je transparentnosť?

Alebo povedzme vývojári prehliadačov prišli s vlastnou vlastnosťou – inováciou, ktorú vôbec nikto nikde nemá, ale dokument s takouto vlastnosťou neprejde kontrolou platnosti, pretože v špecifikácii takáto vlastnosť nie je.

Z týchto a ďalších dôvodov používajú prehliadače na začiatku vlastností predpony, ktoré nie sú súčasťou oficiálnej špecifikácie. Každý prehliadač má svoju vlastnú predponu začínajúcu znakom „-“, tento znak na začiatku vlastnosti, ako aj znak „_“ podľa špecifikácie CSS 2.1 označujú, že vlastnosť je vyhradená pre rozšírenia CSS určitých prehliadačov.

Tu sú najobľúbenejšie prehliadače a ich predpony:

PrehliadačPredpona
Opera-o-
Firefox, SeaMonkey, Camino-moz-
Internet Explorer 8 a vyššie-pani-
Safari do verzie 3, Konqueror-khtml-
Safari 3 a vyššie, Google Chrome-webkit-

Používanie predpôn je veľmi jednoduché, stačí vziať nejakú vlastnosť CSS a nahradiť ju požadovanou predponou, napríklad vlastnosť nepriehľadnosť náhrada -moz- ukázalo sa: -moz-opacity

Aj keď v skutočnosti môj výraz" používať predpony» nesprávne! v skutočnosti sa nikde nič nenahrádza, je tam len vlastnosť nepriehľadnosť, je tam -moz-opacity a to sú dve rozdielne vlastnosti, ktoré nemusia plniť rovnakú funkciu!! - treba pochopiť.

A tiež treba chápať, že určité špecifické prehliadače až do určitých verzií môžu podporovať vlastnosti CSS iba s vlastnými predponami (opäť sa nevyjadrujem správne, je správne povedať, že moje vlastné vlastnosti sú rozšírenia CSS prehliadača), alebo môžu spočiatku spoliehať na dokonca vyvinuté špecifikácie. – Každý konkrétny prípad v tejto učebnici rozoberieme samostatne.

Pokiaľ ide o túto kapitolu o transparentnosti, treba poznamenať, že prehliadač Firefox 3.5 a skôr používať vlastný majetok -moz-opacity a prehliadač Safari pred verziou 1.1 používa jeho vlastnosť -khtml-opacity .

Aby sme teda náš príklad urobili úplne krížovým prehliadačom, musíme do kódu pridať niekoľko riadkov:





Predpony a transparentnosť





Ako vidíte, prefixy značne naťahujú kód a ich použitie nie je vždy opodstatnené, ak verzie prehliadačov, ktoré chcú pracovať s určitými vlastnosťami len pomocou vlastných prefixov, sú dosť staré, ako je to v prípade vlastnosti nepriehľadnosť, potom ich nemôžeš označiť .. - aj keď je to samozrejme zlá rada ..

Teraz niekoľko užitočných tipov..

Vždy používajte predpony (dobre, pokiaľ sa bez nich samozrejme nezaobíde ani jeden alebo druhý prehliadač) v prípadoch, keď použitá vlastnosť môže výrazne ovplyvniť výkon, čitateľnosť a použiteľnosť stránky. Jedna vec je, keď nebudú fungovať akékoľvek maličkosti v dizajne stránky, a úplne iná, keď napríklad nefunguje menu stránky alebo nie je možné prečítať text na stránke kvôli tomu, že prehliadač to robí nepodporuje nejakú vlastnosť, ale namiesto toho používa podobnú svoju vlastnú.

V CSS existujú tri spôsoby, ako zmeniť priehľadnosť prvku:
pomocou vlastnosti opacity,
pomocou funkcie rgba(),
pomocou funkcie hsla().

1. Vlastnosť nepriehľadnosti

Vlastnosť opacity vám umožňuje čiastočne alebo úplne spriehľadniť akýkoľvek prvok webovej stránky. Táto vlastnosť mení priehľadnosť prvkov, ktoré sú nastavené na obrázok na pozadí(obrázok) alebo nastavte pozadie farbou alebo prechodom. Ak prvok, ktorý má aplikovanú vlastnosť opacity, obsahuje ďalšie prvky, zmenia tiež svoju nepriehľadnosť.
Vlastnosť opacity nadobúda hodnoty medzi 0 (úplne priehľadné) a 1 (nepriehľadné), napríklad:

H1 (farba: #CD6829;) div ( pozadie: #CDD6DB; nepriehľadnosť: .3; )
Ryža. 1. Transparentnosť prvkov pomocou nepriehľadnosti

2. Funkcia RGB().

Farebný model RGBA vytvára farebný odtieň zmiešaním v požadovaných pomeroch. červená, zelená (zelená) a Modrá kvety a alfa kanál (alfa) je zodpovedný za stupeň priehľadnosti farby. Na rozdiel od vlastnosti opacity, pre box obsahujúci iné prvky, funkcia rgba() zmení len nepriehľadnosť boxu.

Ryža. 2. RGB farebný model h1 (farba: #CD6829;) div (pozadie: rgba(205, 214, 219, 0,3);)
Ryža. 3. Transparentnosť prvkov pomocou funkcie rgba().

3. funkcia hsl().

Funkcia hsla(), ktorej parametre znamenajú tón (odtieň), Sýtosť, jas a alfa kanál (alfa), tiež umožňuje nastaviť priesvitnú farbu.

Farebné odtiene sú určené v percentách pomocou zodpovedajúcej hodnoty z farebného kolieska. Samotný kruh je rozdelený na sektory, na hraniciach ktorých sú základné farby:

0/360° - červená
60° - žltá
120° - zelená
180° - modrá
240° - modrá
270° - fialová
300° purpurová.

Ak chcete získať čiernu farbu, musíte nastaviť hodnoty odtieňa, sýtosti a jasu na nulu - hsla(0, 0 %, 0 %, 1) . Biela sa získa pri 100 % jasu hsla (0, 0 %, 100 %, 1) a sivá sa získa pri nulová hodnota saturácia hsla(0, 0 %, 50 %, 1) .

CSS3 definuje vlastnosť opacity na aplikovanie transparentného efektu na prvky stránky. Hodnota tejto vlastnosti je číslo medzi 0,0 a 1,0. Hodnota nula robí prvok úplne priehľadným, zatiaľ čo hodnota 1 ho robí úplne nepriehľadným. Vlastnosť možno použiť na akýkoľvek prvok stránky.

Img1 ( nepriehľadnosť: 0,2; ) .img2 ( nepriehľadnosť: 0,5; ) .img3 ( nepriehľadnosť: 1,0; )

Na nastavenie priehľadnosti pomocou skriptu použite: object.style.opacity

Stará Mozilla a Firefox 0.8 používajú pre túto vlastnosť svoj vlastný názov: -moz-opacity Na nastavenie priehľadnosti pomocou skriptu použite: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - postavené na jadre KHTML, použite vlastnosť na ovládanie priehľadnosti: -khtml-opacity Ak chcete nastaviť priehľadnosť pomocou skriptu, použite: object.style.KhtmlOpacity

Safari používa nepriehľadnosť CSS3 od verzie 1.2, ale Konqueror starší ako verzia 3.1, ktorý prestal podporovať -khtml-opacity, nezaviedol podporu pre nepriehľadnosť CSS3.

Internet Explorer od verzie 5.5 až po dnešnú najnovšiu verziu Internetová verzia Explorer 7 implementuje transparentnosť cez filter Alpha DirectX. Stojí za zmienku, že tento filter používa hodnotu priehľadnosti v rozsahu od 0 do 100 (a nie od 0,0 do 1,0). Všimol som si tiež, že filter možno použiť iba na prvok s vlastnosťou height, width, alebo position nastavenou na absolútnu, alebo writeMode nastavenou na tb-rl, alebo contentEditable nastavenou na true.

Príklad (nastavte nepriehľadnosť na polovicu):

Img1 ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ syntax (preferované) */ .img2 ( filter: alpha(opacity=50); ) /* IE4 syntax */ To nastavte priehľadnosť pomocou skriptu, použite: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(reťazec parametra)"

Ak chcete získať priehľadnosť podobnú priehľadnosti W3C, použite ako reťazec parametra "opacity=číslo od 0 do 100".

Ako to urobiť, aby to fungovalo vo všetkých prehliadačoch:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 a nižšie */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ nepriehľadnosť: 0,5; /* CSS3 – Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

javascript

function setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Ak neexistuje žiadny prvok so zadaným ID alebo prehliadač nepodporuje ani jeden zo známych spôsobov ovládania priehľadnosti if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Ak je už priehľadnosť nastavená, zmeňte ju cez kolekciu filtrov, inak pridať priehľadnosť cez style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; inak elem.style.filter += "progid: DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Aby ste neprepísali iné filtre, použite "+=" ) else // Iné prehliadače elem.style = nOpacity; ) funkcia getOpacityProperty() ( if ( typeof document.body.style.opacity == "string") // v súlade s CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) vráti "opacity"; inak if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 a staršie verzie, Firefox 0.8 vráti "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 vráti "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ vráti "filter"; vrátiť nepravdu; // žiadna transparentnosť )

Úloha

Vytvorte blokový prvok s priesvitným celým obsahom.

Riešenie

Na zmenu stupňa priehľadnosti prvku sa používa vlastnosť štýlu opacity s hodnotou od 0 do 1, kde 0 zodpovedá úplnej priehľadnosti a 1 naopak priehľadnosti objektu. V Internet Exploreri táto vlastnosť nefunguje, takže musíte použiť filter špeciálne pre ňu, vlastnosť, ktorá nie je súčasťou špecifikácie CSS. Príklad 1 ukazuje, ako nastaviť priehľadnosť vrstvy pre všetky prehliadače.

Príklad 1. Polopriehľadná vrstva

HTML5 CSS 2.1 IE Cr Op Sa Fx

priesvitná vrstva

Očividne je overené, že interpolácia zaujímavým spôsobom skresľuje Dirichletov integrál, takže sa tupcovi splnil sen - tvrdenie je úplne dokázané.

Výsledok tento príklad znázornené na obr. jeden.

Ryža. 1. Polopriehľadná vrstva v prehliadači Safari

Vlastnosť filter pridáva priehľadnosť len tým prvkom, kde je nastavená aspoň jedna z veľkostí (šírka alebo výška ) alebo je prvok nastavený na absolútne umiestnenie(pozícia: absolútna).

Upozorňujeme tiež, že priehľadnosť ovplyvňuje celý obsah vrstvy vrátane podradených prvkov a nebude možné zvýšiť úroveň nepriehľadnosti pre ne zmenou nepriehľadnosti. V príklade 1, kde je priehľadnosť vrstvy nastavená na 0,7, dostane text vo vrstve rovnakú hodnotu. Je povolené nastaviť menej, ale text nesmie presiahnuť hodnotu priehľadnosti 0,7.

Za transparentnosť prvkov (obrázkov, textu, blokov) v html zodpovedá vlastnosť CSS opacity.

Syntax CSS

Kde hodnota môže nadobúdať skutočné hodnoty v rozsahu od 0,0 do 1,0. Hodnota 1,0 znamená žiadnu priehľadnosť (predvolené).

Príklad #1. transparentný obrázok v html

Prvý obrázok je vykreslený bez priehľadnosti, druhý s priehľadnosťou 0,5.



Priesvitnosť prvku


Vytvorenie priehľadnosti obrazu pri umiestnení kurzora myši!



Demo Zdroje na stiahnutie

Ďakujem za tvoju pozornosť!

Ďalší článok
Ako vytvoriť rolovateľný div?