Hogyan jelenítsük meg a szöveget a képen CSS3 mix-blend módban

Kép hátterek nagyszerűen néz ki a nagy kijelző szövegek mögött. CSS végrehajtása azonban nem olyan egyszerű. Használhatjuk a háttér-klip: szöveg; tulajdonság, de ez még mindig kísérleti jellegű, anélkül, hogy elegendő böngésző támogatásra lenne szükség.

A CSS alternatívája a szöveg hátterének hátterében használni a mix-blend-módban ingatlan. A HTML elemek keverési módjai mindegyik modern asztali és mobil böngésző esetében meglehetősen támogatott, kivéve néhányat, például az Internet Explorer.

Ebben a bejegyzésben látni fogjuk, hogyan mix-blend-módban (két módja kifejezetten) működik, és hogyan használhatja azt megjelenítse a kép háttérképet két felhasználási esetben:

1. amikor a háttérkép látható a szövegen keresztül
2. amikor a háttérkép fut körül a szöveg

Tekintse meg néhány példát az alábbi demóban (a képek az unsplash.com webhelyről származnak).

A mix-blend-módban A CSS tulajdonság meghatározza, hogy a tartalom és a háttér egy HTML elemnek keverjük össze színben.

Tekintse meg a keverési módok listáját, amelyekből ki fogjuk használni szaporodnak és képernyő ebben a bejegyzésben.

Először nézzük meg, hogyan működnek ezek a két speciális keverési mód.

Hogyan szaporodnak & képernyő keverési módok működnek

A keverési módok technikailag funkciók kiszámítsa a végső színértéket az elem színkomponenseit és hátterét.

A szaporodnak keverési mód

Ban,-ben szaporodnak keverési mód, az elemek és azok hátterének egyedi színei szorozva, és a kapott szín a végső kevert változatra kerül alkalmazásra.

A szaporodnak a keverési módot a következő képlet szerint számítjuk ki:

B (Cb, Cs) = Cb × Cs

hol:cb - A háttér színösszetevőjeCs - A forráselem színösszetevőjeB - Keverési funkció

Amikor cb és Cs szorozva, a kapott szín a két színkomponens keveréke, és ez az olyan sötét, mint a két szín legsötétebbje.

A szöveges kép hátterének létrehozásához az esetre kell összpontosítanunk, amikor Cs (a forráselem színösszetevője) fekete vagy fehér.

Ha Cs jelentése fekete annak értéke 0, a kimeneti szín is fekete lesz, mert Cb × 0 = 0. Tehát, ha az elem fekete színű, akkor nem számít, milyen színű a háttér, minden, amit a keverés után látunk, fekete.

Ha Cs jelentése fehér annak értéke 1, a kimeneti szín bármilyen cb azért mertCb × 1 = Cb. Tehát ebben az esetben közvetlenül látjuk a hátteret ahogy van.

A képernyő keverési mód

A képernyő a keverési mód hasonlóan működik szaporodnak keverési mód, de ellentétes eredménnyel. Szóval, a fekete előtér a hátteret mutatja ahogy van, és a fehér előtér látható fehér bármilyen háttérrel.

Nézzük gyorsan meg a képletet:

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

Amikor Cs jelentése fekete (0), a háttérszín a keverés után jelenik meg, mint:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Amikor Cs jelentése fehér (1) az eredmény fehér, bármilyen hátterű, mint:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. A képen látható kép

A háttérképen megjelenő szöveg megjelenítéséhez a képernyő keverési mód val vel fekete szöveg és fehér környező tér.

 
 
Víz
 
 

 .hátteret szélesség: 600px; magasság: 210px; háttérkép: url (someimage.jpg); háttérméret: 100%; margó: auto;  .text color: black; háttérszín: fehér; mix-blend-mode: képernyő; szélesség: 100%; magasság: 100%; betűméret: 160pt; font-súly: merészebb; szöveg-igazítás: központ; vonalmagasság: 210px; margin: 0;  

Jelenleg szövegünk az alábbiak szerint néz ki, a következő lépésben hozzáadunk egyéni színt a háttérhez.

Szín hozzáadása

Ahogyan mostanra már kitalálta, a keverési módok használatával csak két színválasztást hagyhatunk a szöveget körülvevő területre - fekete vagy fehér. azonban fehér, lehet hozzáadni néhány színt átfedéssel, ha az átfedés színe jól illeszkedik a használt képhez.

Szín hozzáadása a környező területhez adjon hozzá egy

a HTML-hez átfedéshez, és adj neki háttérszín nagy átláthatósággal. Használja a mix-blend-mód: szaporodjon az overlay tulajdonsága, mivel ez segít a háttérkép színének egy kicsit jobban keveredik a kép a szöveg belsejében jelenik meg.

 
 
Víz
 
 
 

 .overlay háttérszín: rgba (0,255,255, .1); mix-blend-mode: szorzás; szélesség: 100%; magasság: 100%; pozíció: abszolút; top: 0;  

Ezzel a technikával a szöveg körül a környező területet a kép háttérrel színezhetjük:

Ne feledje, hogy a technika csak jól működik finom átlátszó színek. Ha teljesen átlátszatlan színt, vagy egy olyan színt használ, amely nem felel meg a képnek, a szöveg belsejében megjelenő kép nagyon látható színárnyalatú lesz a használt színben, így ha nem néz ki,, elkerülje az átlátszatlan színeket.

2. A kép hátterével körülvett szöveg

Annak ellenére, hogy normál szövegelhelyezés van a kép hátterén ugyanazt a technikát igényli, Megmutatom Önnek egy példát, hogyan néz ki a fenti demó, amikor a hatását megfordítják, azaz ha a szöveg színe fehér, és a háttér fekete.

 .szöveg szín: fehér; háttérszín: fekete; mix-blend-mode: képernyő; szélesség: 100%; magasság: 100%; betűméret: 160pt; font-súly: merészebb; szöveg-igazítás: központ; vonalmagasság: 210px; margin: 0;  

Használhatja a ugyanaz a fedvény bizonyos színek hozzáadásához a szöveghez, kivéve, ha azt szeretné, hogy fehér legyen.

 .overlay háttérszín: rgba (0,255,255, .1); mix-blend-mode: szorzás; szélesség: 100%; magasság: 100%; pozíció: abszolút; top: 0;  

Az alábbiakban láthatjuk, hogyan néz ki a fordított eset:

Ne feledje, hogy az Internet Explorerben, vagy bármely más böngészőben, amely nem támogatja az mix-blend-módban tulajdonság, a kép háttér nem jelenik meg, és a szöveg fekete (vagy fehér) marad.