Fundal Napivprozori. Metode de creare a fundalurilor clare

Vizibilitatea fundalului pe site este creată prin CSS personalizat. Vizibilitatea poate fi obținută în două moduri: prin puterea opacității și background:rgba(). Să aruncăm o privire la pieile lor și apoi vom efectua curățarea.

1. Puterea opacității CSS de a face fundalul vizibil

CSS are puterea opacității, care vă permite să setați opacitatea imaginilor, textelor și chiar fundalurilor.

Perspectiva prestabilită este setată pur și simplu prin introducerea unui număr de vorbire de la 0,0 la 1,0. Cu cât numărul este mai mic, cu atât obiectul este mai mic.

opacitate: 0,5; // Napіvprosorіst opacitate: 0,2; // Obiectul este vizibil în mai puțin de 20%. opacitate: 0,8; // Obiectul este vizibil în mai puțin de 80%.

Să aruncăm o privire asupra puterii opacității.

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Влад Мержевич

Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Рис. 1. Изображение для создания фона

После чего добавляем рисунок в качестве фона через свойство background , как показано в примере 1.

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul acestui butt este prezentat în Fig. 3.

Mic 2. Zastosuvannya fundal copil

Browser vechi Internet Explorer 6 nu funcționează cu PNG-24, deoarece din anumite motive este necesar să suportați acest browser, pentru care va trebui să utilizați scripturi.

Metoda de ghidare are un interval scăzut. Deci, când activați imaginile în browser, fundalul dispare. Mai mult, nu este atât de ușor să schimbi culoarea și valoarea clarității, pentru care trebuie să editezi din nou imaginea.

Faceți clic des pe imagini

Această metodă se întoarce la vechile moduri de implementare a ideii de insight, când browserele „nu au făcut nimic” și s-au luat decizii neconvenționale. Accentul este pus pe imaginea încadrată, în care există goluri și goluri în pixeli (Fig. 3). Această structură regulată creează efectul de claritate, pe care îl are într-adevăr.

Mic 3. Micuții mai mari cu coarne

Axa arată ca una verde (Fig. 4).

Mic 4. Imitarea intuiției

O parte din această metodă poate fi comparată cu cea anterioară, puteți, de asemenea, să scăpați de franjuri moire și să degradați textul.

Opacitatea puterii

Valoarea opacității CSS 3 reprezintă valoarea opacității și variază de la 0 la 1, unde zero este opacitatea elementului și unu este obscuritatea. La putere, opacitatea are o particularitate - înțelegerea se extinde în toate elementele subsidiare și pot depăși valorile percepției tatălui lor. Se dovedește că un text obscur pe un fundal clar nu se poate face (exemplul 2).

Cap 2. opacitatea Vikoristannya

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultatul fundului este prezentat în Fig. 5.

Mic 5. Propagarea textului și a fundalului

În Internet Explorer până la versiunea 8.0, opacitatea nu funcționează, deci puterea de filtrare este specifică browserului. Desigur, va avea ca rezultat un cod CSS nevalid.

RGBA

Abordarea actuală este mult mai simplă și mai avansată decât majoritatea celorlalte metode și utilizează o gamă de culori și fundaluri în format RGBA. Primele trei litere sunt bine cunoscute și sunt descifrate ca roșu, verde, albastru (roșu, verde, albastru), restul simbolizează canalul alfa și stabilește claritatea elementului. Formatul de înregistrare este următorul.

culoare de fundal: rgba(r, g, b, a);

La brațe, în loc de litere, se setează valoarea componentei de culoare, care poate fi văzută în orice editor grafic, valoarea rămasă este setarea clarității și evitarea valorilor opacității puterii.

Nu toate browserele acceptă acest format: Internet Explorer, începând cu versiunea 9, Opera cu versiunea 10, Firefox cu 3, Safari cu 3.2. Ale in general, browserele actuale reprezintă corect percepția. Pentru versiunile mai vechi de IE, puteți specifica direct culoarea celei originale pentru noul format și, desigur, nu va exista claritate. În caz contrar, voi reveni rapid la filtrul de putere, altfel va trebui să suport faptul că insight-ul va interfera și cu textul (exemplul 3). Pentru a mă asigura că codul CSS este valid, voi folosi câteva comentarii inteligente.

Cap 3. Vikoristannya RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultatul fundului poate fi văzut în Fig. 6.

Mic 6. Napivprozor cu text obscur

Aliniați imaginea cu cea de dinainte, literele au devenit mai luminoase și mai clare.

U browsere de internet Explorer 7 a întâlnit o eroare la combinarea culorii de fundal cu valori diferite. De exemplu, dacă setați culoarea de fundal la albastru închis, așa cum se arată mai jos, fundalul nu va apărea în IE7.

Div (culoare de fundal: roșu; /* Nu este blocat în IE7 */ culoare de fundal: rgba(255, 0, 0, 0.5); )

Acesta pare să fie cazul când înlocuiți culoarea de fundal cu fundal.

Div (fond: roșu; /* Și funcționează */ fundal: rgba(255, 0, 0, 0.5); ) Cu toate acestea, există o avertizare aici. Validatorul CSS „se așează” pe fundal atunci când îi dați valori în format RGBA. De asemenea, este corect să îl plasați înaintea culorii de fundal. Încă o dată, trebuie să faceți schimb între browsere și valabilitate.

CSS insight - soluție cross-browser - 3,8 din 5 pe baza a 6 voturi

În această lecție ne vom uita la claritatea CSS, vom învăța cum să oferim diferite elemente ale paginii claritate și să obținem compatibilitate deplină între browsere, astfel încât același efect să funcționeze în browsere diferite.

Cum să setați percepția oricărui element

În CSS3, crearea de elemente clare se bazează pe puterea opacității, care poate fi limitată la orice element. Această putere are valori de la 0 la 1, care indică nivelul de perspectivă. Unde 0 este percepția totală (valori pentru calculele pentru toate elementele), iar 1 este lipsa totală de înțelegere. Valorile sunt scrise ca fracții: 0,1, 0,2, 0,3 etc.

fundul Vikoristan:

Vizibilitate între browsere

Cu toate acestea, nu toate browserele acceptă și implementează puterea mai mare a opacității. În astfel de situații, este necesar să folosiți ceva numit putere sau filtru.

Puterea opacității CSS3 încurajează astfel de tipuri Browsere Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Unul atât de bun:) un browser ca Internet Explorer până la versiunea 9.0 nu suportă puterea opacității și pentru claritate pentru acest browser este necesar să se folosească puterea filtrului și valoarea lui alpha (Opacity=X), în care X este, în general, un număr în intervalul de la 0 la 100, pentru a cărui asistență există un zel de înțelegere. 0 este complet perspicace, iar 100 este complet neclar.

Care este tam-tam? browser Firefox Până la versiunea 3.5, acceptă power -moz-opacity în loc de opacitate.

Browsere precum Safari 1.1 și Konqueror 3.1, bazate pe motorul KHTML, utilizează următoarea opțiune de vizibilitate a browserului: -khtml-opacity.

Cum putem face CSS transparent, astfel încât să arate la fel în toate browserele? Pentru a crea o soluție cross-browser pentru vizibilitatea elementelor, este necesar să înregistrați nu numai o putere de opacitate, ci și un set suplimentar de puteri:

filtru: alfa (Opacitate = 50); /* Vizibilitate pentru IE */ -moz-opacity: 0,5; /* Suport Mozilla 3.5 și mai mic */ -khtml-opacity: 0,5; /* Suport pentru Konqueror 3.1 și Safari 1.1 */ opacitate: 0,5; /* Suport browser */

Claritatea diferitelor elemente

Să aruncăm o privire la aplicațiile de insight asupra elementelor cântecului, care sunt paginile cele mai frecvent utilizate.

Claritatea CSS a imaginii.

Să aruncăm o privire la o serie de opțiuni bazate pe imaginea vizuală. Prima imagine nu are un set de claritate, cealaltă are o claritate de 50%, iar a treia are 30%.

Rezultat:

Informații despre CSS sub ora în care trece cursorul peste imagine.

Este adesea necesar să creați o imagine clară sau un alt element în momentul în care cursorul este plasat peste ea. Puteți utiliza pseudoclasa CSS suplimentară: hover. Pentru această imagine este necesar să se înregistreze două clase, una primară - starea inactivă a imaginii și cealaltă clasă cu pseudo-clasa: hover, aici este necesar să se indice claritatea imaginii în momentul trecerii cursorului. .

Rezultatul îl puteți vedea în demo.

Claritate de fundal în CSS.

Aici este necesar să ne amintim că percepția se extinde la toate intrările unui element și este imposibil să extindeți o perspectivă mai mare dincolo de intrările unui element.

De exemplu, să creăm o opțiune cu fundalul lateral creat de o imagine suplimentară și blocul cu fundalul creat de o culoare suplimentară și o claritate de 50%.

Cod fund:

Axa este rezultatul codului postat:

Crearea unui fundal clar în HTML și CSS (opacitate și efecte RGBA)

Efectul insight-ului elementul este bine marcat pe fundal și aspectul de expansiune în diferite sisteme de operare ceva care arată elegant și frumos. Capul mamei sub blocurile transparente nu este un bebeluș monocromatic, ci o imagine, în care claritatea în sine devine vizibilă.

Acest efect poate fi obținut într-o varietate de moduri, inclusiv metode de modă veche, cum ar fi utilizarea imaginilor transparente, crearea unei imagini mapate și puterea opacității. Deși este nevoie doar de a lucra într-un bloc pe baza unei revizuiri vizuale, aceste metode au dezavantaje dezavantajoase.

Să aruncăm o privire asupra contrastului dintre text și fundal - cum să-l folosiți corect în designul site-ului web:

Principala caracteristică a acestei puteri constă în faptul că importanța înțelegerii se aplică tuturor elementelor subsidiare din mijloc și nu doar afidelor. Aceasta înseamnă că fundalul și textul vor deveni mai clare. Puteți crește vizibilitatea schimbând comanda opacitate de la 0,1 la 1.

HTML 5 CSS 3 IE 9

În designul web, o parte din claritate este limitată și de formatul de culoare RGBA, care este setat pentru fundalul elementului.

Asigurați-vă că designul este transparent fără un element solid, iar textul este opac pentru a-și păstra lizibilitatea. Puterea opacității nu se potrivește aici, deoarece textul din mijlocul elementului va fi adesea clar. Cel mai bine este să utilizați formatul RGBA, parte din care este canalul alfa sau, cu alte cuvinte, sensul vizibilității. Pe măsură ce semnificația este scrisă rgba, atunci la brațele prin care se schimbă semnificațiile componentelor roșii, albastre și verzi ale schemei de culori. Claritatea rămasă este setată de la 0 la 1, ceea ce înseamnă că 0 este clar și 1 este dalton - sintaxa rgba.

Napivprozor pentru HTML 5 CSS 3 IE 9

Valoarea obscurității pentru fundal este setată la 90% - un fundal clar și un text obscur.

Eu mor tot timpul. Astăzi voi învăța cum să setez o culoare clară pentru CSS. În prezent, există 3 moduri de a face acest lucru.

Metoda 1 - valoare transparentă

Dacă setați valoarea culorii la text sau valoarea de fundal la transparent , atunci culoarea va fi complet vizibilă, mai degrabă decât invizibilă. fund:

Culoare: transparent;

Este imposibil să publicați un astfel de text pe pagină.

Metoda 2 - modul de culoare rgba

Și aceasta este aceeași inovație a CSS3. Anterior, dezvoltarea web nu avea un astfel de mod, era doar rgb. Cântând, știți să scrieți culoarea în acest format. Pentru a face acest lucru, trebuie să introduceți trei valori în brațe cuprinse între 0 și 255, care indică prezența uneia dintre cele trei culori principale (roșu, verde, albastru). De exemplu:

Fundal: rgb(230, 121, 156);

Formatul rgba nu este modificat în niciun fel, se adaugă doar un sfert de valoare - gradul de claritate al elementului de la 0 la 1. Acest format de înregistrare este folosit în principal pentru a seta culoarea vizuală, și nu culoarea suprafeței. Pentru a obține o mai mare claritate, trebuie să scrieți 0 ca un sfert din valoare.

Fundal: rgba(0, 0, 0, 0);

În acest caz, 3 cifre nu joacă un rol special.

Culoarea vizuală poate fi setată prin setarea unei valori de la 0,01 la 0,99 în al patrulea parametru. După ce ați scris deja puțin despre crearea fundalului în acest articol, puteți afla despre ce este vorba.

Metoda 3 - opacitatea

O altă putere de la tehnologia css3. Ale, vreau să te pun înaintea ta, pentru că se descurcă puțin diferit. În spatele opacității suplimentare, o perspectivă este atribuită fiecărui bloc, până la care este stagnată. În acest fel, lizibilitatea textului și claritatea imaginilor sunt îmbunătățite. Deci puterea, cred, este deosebit de importantă pentru blocurile care nu au text sau alte informații. Valorile pot fi setate de la 0 la 1, ca în al patrulea parametru sub ora de setare a culorii în format rgba.

Zagalom, pe Narazi Iată toate modalitățile pe care le cunosc culoare limpede la css. În ce scop este acest lucru necesar, acesta este un alt fel de nutriție. Prin ochiul pământului se poate vedea pe cei care sunt sub el. Uneori trebuie să muncești din greu la design. Recepția Zagalom iz napіvprosorіstyu chiar și expansiunile de astăzi.

Sper să vă amintiți și să învățați rapid din aceste trei metode. Și sunt de acord cu asta.