Så här visar du text på bild med CSS3 mix-mix-läge

Bildbakgrund ser bra ut bakom stora displaytexter. Men dess CSS-genomförande är inte så enkelt. Vi kan använda bakgrundsbilder: text; egendom, men det är fortfarande en experimentell funktion utan tillräckligt med webbläsarstöd.

CSS-alternativet för att visa en bildbakgrund bakom en text är använda mix-blandning-mode fast egendom. Blandningslägen för HTML-element stöds rättvist över alla moderna skrivbords- och mobila webbläsare, med undantag för några, till exempel Internet Explorer.

I det här inlägget ska vi se hur mix-blandning-mode (två av dess lägen specifikt) fungerar, och hur du kan använda den till visa en text med bildbakgrund i två användningsfall:

när bakgrundsbilden kan ses genom texten
när bakgrundsbilden går runt texten

Se några exempel i demo nedan (bilder är från unsplash.com).

Se penntexten med bildbakgrund av HONGKIAT (@hkdc) på CodePen.

De mix-blandning-mode CSS-egenskapen definierar hur innehåll och den bakgrund av ett HTML-element ska blanda ihop färgvis.

Ta en titt på listan över blandningslägen, av vilka vi ska använda multiplicera och skärm i det här inlägget.

Låt oss först titta på hur dessa två specifika blandningslägen fungerar.

På vilket sätt `multiplicera` & `skärm` blandningslägen fungerar

Blandningslägen är tekniskt funktioner som Beräkna ett slutligt färgvärde med hjälp av färgkomponenterna i ett element och dess bakgrund.

De `multiplicera` blandningsläge

I multiplicera blandningsläge, de enskilda färgerna på elementen och deras bakgrunder är multiplicerat, och den resulterande färgen appliceras på den slutliga blandade versionen.

De multiplicera blandningsläge beräknas enligt följande formel:

B (Cb, Cs) = Cb × Cs

var:Cb - Färgkomponent i bakgrundencs - Färgkomponent i källelementetB - Blandningsfunktion

När Cb och cs multipliceras, den resulterande färgen är en blandning av dessa två färgkomponenter, och är lika mörk som den mörkaste av de två färgerna.

För att skapa vår textbildsbakgrund måste vi fokusera på fallet när cs (färgkomponenten i källelementet) är antingen svart eller vitt.

Om cs är svart dess värde är 0, Utgångsfärgen kommer också att vara svart, eftersom Cb × 0 = 0. Så, när elementet är svart, det spelar ingen roll vilken färg bakgrunden är, allt vi kan se efter blandning är svart.

Om cs är vit dess värde är 1, Utgångsfärgen är vad som helst Cb är för attCb × 1 = Cb. Så i det här fallet ser vi bakgrunden direkt som det är.

De `skärm` blandningsläge

De skärm blandningsläge fungerar på samma sätt som multiplicera blandningsläge, men med motsatt resultat. Så, a svart förgrund visar bakgrunden som det är, och a vit förgrund visar vit med vilken bakgrund som helst.

Låt oss snabbt se dess formel:

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

När cs är svart (0) kommer bakgrundsfärgen att visas efter blandningen, som:

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

När cs är vit (1) resultatet blir vit med någon bakgrund, som:

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

1. Bilden visas genom text

För att visa text som visar genom sin bakgrundsbild använder vi skärm blandningsläge med svart text och vitt omgivande utrymme.

  Vatten

 .bakgrund bredd: 600px; höjd: 210px; bakgrundsbild: url (someimage.jpg); bakgrundsstorlek: 100%; marginal: auto;  .text färg: svart; bakgrundsfärg: vit; mix-mix-mode: skärm; bredd: 100%; höjd: 100%; typsnittstorlek: 160pt; font-weight: bolder; text-align: center; linjehöjd: 210px; marginal: 0;

För närvarande ser vår text ut nedan, i nästa steg lägger vi till anpassad färg i bakgrunden.

Lägger till färg

Som du kanske har gissat nu, använder vi blanda lägen bara två färgval för området som omger texten - svart eller vitt. dock med vit, det är möjligt att lägga till lite färg på den med ett överlag, om överlagringsfärgen matchar snyggt med den använda bilden.

För att lägga till färg i det omgivande området, lägg till en

till HTML för en överlagring, och ge den en bakgrundsfärg med hög genomskinlighet. Använd också mix-mix-mode: multiplicera egendom för överlagret, eftersom det hjälper bakgrundsfärgen på överlägget till blanda lite bättre med bilden som visas i texten.

  Vatten

 .överlagring bakgrundsfärg: rgba (0,255,255, .1); mix-mix-mode: multiplicera; bredd: 100%; höjd: 100%; position: absolut; topp: 0;

Med den här tekniken kunde vi färga omgivningen runt texten med bildbakgrunden:

Observera att tekniken bara fungerar bra med subtila genomskinliga färger. Om du använder en helt ogenomskinlig färg eller en färg som inte stämmer överens med bilden, kommer bilden som förekommer i texten har en mycket synlig nyans av färg som används, så om det inte är en look som du går för, Undvik ogenomskinliga färger.

2. Text omgiven av bildbakgrund

Även om en vanlig textplacering över en bildbakgrund kräver samma teknik, Jag ska visa dig ett exempel på hur ovanstående demo ser ut när effekten är omvänd, d.v.s. när textfärgen är vit och bakgrunden är svart.

 .text färg: vit; bakgrundsfärg: svart; mix-mix-mode: skärm; bredd: 100%; höjd: 100%; typsnittstorlek: 160pt; font-weight: bolder; text-align: center; linjehöjd: 210px; marginal: 0;

Du kan använda samma överlagring För att lägga till lite färg på texten, om du inte vill hålla den vit.

 .överlagring bakgrundsfärg: rgba (0,255,255, .1); mix-mix-mode: multiplicera; bredd: 100%; höjd: 100%; position: absolut; topp: 0;

Och nedan kan du se hur omvänd fall ser ut som:

Observera att i Internet Explorer eller någon annan webbläsare som inte stöder mix-blandning-mode egenskapen kommer bildbakgrunden inte att visas och texten blir svart (eller vit).