Cum se afișează textul pe imagine Cu ajutorul mix-ului CSS3

Imagini de fundal arata grozav in spatele textelor mari de pe ecran. Cu toate acestea, implementarea CSS nu este atât de simplă. Putem folosi clip-clip: text; proprietate, totuși aceasta este încă o caracteristică experimentală fără un suport suficient pentru browser.

Alternativa CSS de a afișa un fundal de imagine în spatele unui text este folosind mix-amestec-mode proprietate. Moduri de amestecare pentru elementele HTML sunt acceptate destul de bine în toate browserele desktop și mobile moderne, cu excepția câtorva dintre ele, cum ar fi Internet Explorer.

În acest post, vom vedea cum mix-amestec-mode (două moduri în mod specific) funcționează și cum îl puteți folosi afișați un text cu fundal imagine în două cazuri de utilizare:

1. atunci când imaginea de fundal pot fi văzute prin text
2. atunci când imaginea de fundal alerga în jur textul

Vedeți câteva exemple din demo-ul de mai jos (imaginile provin de la unsplash.com).

mix-amestec-mode Proprietatea CSS definește modul în care conţinut si fundal de un element HTML ar trebui se amestecă împreună.

Uitați-vă la lista modurilor de amestecare, din care vom folosi multiplica și ecran în acest post.

Mai întâi, să analizăm modul în care funcționează aceste două moduri de amestecare specifice.

Cum multiplica & ecran modurile de amestecare funcționează

Modurile de amestecare din punct de vedere tehnic sunt funcții care calcula valoarea finală a culorii folosind componentele de culoare ale unui element și fundalul acestuia.

multiplica mod de amestecare

În multiplica modul de amestecare, culorile individuale ale elementelor și fundalul acestora înmulțit, iar culoarea rezultată este aplicată versiunii finale mixte.

multiplica modul de amestecare se calculează după următoarea formulă:

B (Cb, Cs) = Cbx Cs

Unde:Cb - Componenta color a fundaluluiCs - Componenta de culoare a elementului sursăB - Funcția de amestecare

Cand Cb și Cs sunt multiplicate, culoarea rezultată este un amestec al acestor două componente de culoare și este la fel de întunecată ca cea mai întunecată dintre cele două culori.

Pentru a crea fundalul imaginii noastre text, trebuie să ne concentrăm asupra cazului când Cs (componenta de culoare a elementului sursă) este fie negru sau alb.

Dacă Cs este negru valoarea lui este 0, culoarea de ieșire va fi de asemenea negru, deoarece Cb × 0 = 0. Deci, atunci când elementul este colorat negru, acesta nu contează ce culoare are fundalul, tot ce vedem după amestecare este negru.

Dacă Cs este alb valoarea lui este 1, culoarea de ieșire este orice Cb este deoareceCb × 1 = Cb. Deci, în acest caz vedem fundalul direct așa cum este.

ecran mod de amestecare

ecran modul de amestecare funcționează similar cu modul multiplica modul de amestecare, dar cu rezultatul opus. Deci, a negru în prim plan arată fundalul așa cum este, și a afișajul alb arată alb cu orice fundal.

Să vedem rapid formula sa:

B (Cb, Cs) = Cb + Cs - (CbxCs)

Cand Cs este negru (0), culoarea fundalului va fi afișată după amestecare, astfel:

Cb + 0 - (Cbx0) = Cb + 0 - 0 = Cb

Cand Cs este alb (1) rezultatul va fi alb cu orice fundal, astfel:

Cb + 1 - (Cbxi) = Cb + 1 - Cb = 1

1. Imaginea afișată prin text

Pentru a afișa textul prin imaginea de fundal, folosim ecran mod de amestecare cu text negru și spațiul alb înconjurător.

 
 
Apă
 
 

 .fundal lățime: 600px; înălțime: 210px; fundal-imagine: url (someimage.jpg); dimensiunea fundalului: 100%; marja: auto;  .text culoare: negru; fundal-culoare: alb; mix-mode-mode: ecran; lățime: 100%; înălțime: 100%; font-size: 160pt; font-weight: mai îndrăzneț; text-align: centru; linia-înălțime: 210px; marja: 0;  

În prezent, textul nostru arată mai jos, iar în pasul următor vom adăuga culoarea personalizată în fundal.

Adăugarea de culori

După cum probabil ați ghicit până acum, folosirea modurilor de amestecare ne lasă doar două opțiuni de culoare pentru zona care înconjoară textul - negru sau alb. in orice caz cu alb, este posibil să adăugați o anumită culoare la ea folosind o suprapunere, dacă culoarea suprapusă se potrivește frumos cu imaginea utilizată.

Pentru a adăuga culoare în zona înconjurătoare, adăugați a

la HTML pentru o suprapunere, și dați-i a culoarea de fundal cu transparență ridicată. Utilizați și mix-mode-mode: multiplica proprietate pentru suprapunere, deoarece ajută la culoarea de fundal a suprapunerii se amestecă un pic mai bine cu imaginea care apare în interiorul textului.

 
 
Apă
 
 
 

 .suprapunere background-color: rgba (0,255,255, .1); mix-blend-mode: multiplica; lățime: 100%; înălțime: 100%; poziția: absolută; top: 0;  

Cu această tehnică, am putea colora zona din jur în jurul textului cu fundalul imaginii:

Rețineți că tehnica funcționează bine numai cu culori transparente subtile. Dacă utilizați o culoare complet opacă sau o culoare care nu se potrivește cu imaginea, imaginea care apare în interiorul textului va avea o nuanță foarte vizibilă a culorii utilizate, deci dacă nu este o privire pe care o căutați, evitați culorile opace.

2. Textul este înconjurat de fundal de imagine

Chiar dacă o plasare text obișnuită pe un fundal de imagine necesită aceeași tehnică, Vă voi arăta un exemplu de cum arată demo-ul de mai sus atunci când efectul este inversat, adică când culoarea textului este albă și fundalul este negru.

 .text culoare: alb; fundal-culoare: negru; mix-mode-mode: ecran; lățime: 100%; înălțime: 100%; font-size: 160pt; font-weight: mai îndrăzneț; text-align: centru; linia-înălțime: 210px; marja: 0;  

Puteți utiliza funcția aceeași suprapunere pentru a adăuga o anumită culoare textului, cu excepția cazului în care doriți să îl păstrați alb.

 .suprapunere background-color: rgba (0,255,255, .1); mix-blend-mode: multiplica; lățime: 100%; înălțime: 100%; poziția: absolută; top: 0;  

Și mai jos puteți vedea cum arată cazul invers:

Rețineți că în Internet Explorer sau în orice alt browser care nu acceptă mix-amestec-mode proprietate, fundalul imaginii nu va apărea și textul va rămâne negru (sau alb).