Hoe tekst op afbeelding weer te geven met CSS3 mix-blend-modus

Afbeelding achtergronden ziet er geweldig uit achter grote display-teksten. De CSS-implementatie is echter niet zo eenvoudig. We kunnen de gebruiken achtergrond-clip: tekst; eigenschap, maar het is nog steeds een experimentele functie zonder voldoende ondersteuning voor de browser.

Het CSS-alternatief om een ​​afbeelding achter een tekst weer te geven is de ... gebruiken mix-blend-modus eigendom. Mengmodi voor HTML-elementen worden redelijk ondersteund in alle moderne desktop- en mobiele browsers, met uitzondering van een paar, zoals Internet Explorer.

In deze post gaan we kijken hoe mix-blend-modus (twee van zijn modi specifiek) werkt, en hoe je het kunt gebruiken een tekst weergeven met afbeeldingsachtergrond in twee gebruikscasussen:

1. wanneer de achtergrondafbeelding kan gezien worden door de tekst
2. wanneer de achtergrondafbeelding rent rond de tekst

Zie enkele voorbeelden in de onderstaande demo (afbeeldingen zijn van unsplash.com).

De mix-blend-modus CSS-eigenschap definieert hoe de inhoud en de backdrop van een HTML-element zou moeten in kleur vermengen.

Bekijk de lijst met overvloeimodi die we zullen gebruiken vermenigvuldigen en scherm in deze post.

Laten we eerst eens kijken hoe deze twee specifieke overvloeimodi werken.

Hoe vermenigvuldigen & scherm overvloeimodi werken

Overvloeimodi technisch zijn functies die bereken een uiteindelijke kleurwaarde de kleurcomponenten van een element en de achtergrond ervan gebruiken.

De vermenigvuldigen mengmodus

In de vermenigvuldigen mengmodus, de afzonderlijke kleuren van de elementen en hun achtergronden vermenigvuldigd, en de resulterende kleur wordt toegepast op de uiteindelijke gemengde versie.

De vermenigvuldigen mengmodus wordt berekend volgens de volgende formule:

B (Cb, Cs) = Cb x Cs

waar:cb - Kleurcomponent van de achtergrondcs - Kleurcomponent van het bronelementB - Mengfunctie

Wanneer cb en cs worden vermenigvuldigd, de resulterende kleur is een mix van deze twee kleurcomponenten, en is zo donker als de donkerste van de twee kleuren.

Om onze tekstafbeeldingachtergrond te creëren, moeten we ons concentreren op het geval wanneer cs (de kleurcomponent van het bronelement) is zwart of wit.

Als cs is zwart zijn waarde is 0, de uitvoerkleur zal ook zwart zijn, omdat Cb × 0 = 0. Dus, als het element zwart gekleurd is, het maakt niet uit welke kleur de achtergrond heeft, alles wat we kunnen zien na het blenden is zwart.

Als cs is wit zijn waarde is 1, de uitvoerkleur is wat dan ook cb is omdatCb x 1 = Cb. Dus in dit geval zien we de achtergrond direct zoals het is.

De scherm mengmodus

De scherm mengmodus werkt op dezelfde manier als de vermenigvuldigen mengmodus, maar met het tegenovergestelde resultaat. Dus, a zwarte voorgrond toont de achtergrond zoals het is, en een witte voorgrond toont wit met welke achtergrond dan ook.

Laten we snel de formule zien:

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

Wanneer cs is zwart (0), de achtergrondkleur wordt na het mengen weergegeven, als:

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

Wanneer cs is wit (1) het resultaat is wit met een achtergrond, als:

Cb + 1 - (Cb x 1) = Cb + 1 - Cb = 1

1. Afbeelding getoond door tekst

Om tekst weer te geven die wordt weergegeven door de achtergrondafbeelding, gebruiken we de scherm mengmodus met zwarte tekst en witte omringende ruimte.

 
 
Water
 
 

 .achtergrond width: 600px; hoogte: 210 px; achtergrondafbeelding: url (someimage.jpg); achtergrondgrootte: 100%; marge: automatisch;  .text color: black; achtergrondkleur: wit; mix-blend-modus: scherm; breedte: 100%; hoogte: 100%; lettergrootte: 160pt; lettertype-gewicht: vetter; text-align: center; regelhoogte: 210 px; marge: 0;  

Momenteel ziet onze tekst er als volgt uit, in de volgende stap zullen we aangepaste kleuren toevoegen aan de achtergrond.

Kleur toevoegen

Zoals je misschien al geraden had, hebben we door het gebruik van overvloeimodi slechts twee kleurkeuzes voor het gebied rond de tekst - zwart of wit. Echter met wit, het is mogelijk om er wat kleur aan toe te voegen een overlay gebruiken, als de overlay-kleur komt goed overeen met de gebruikte afbeelding.

Als u kleur wilt toevoegen aan de omgeving, voegt u een toe

naar de HTML voor een overlay, en geef het een achtergrondkleur met hoge transparantie. Gebruik ook de mix-blend-modus: vermenigvuldigen eigenschap voor de overlay, omdat dit de achtergrondkleur van de overlay helpt mix een beetje beter met de afbeelding in de tekst.

 
 
Water
 
 
 

 .overlay background-colour: rgba (0,255,255, .1); mix-blend-modus: vermenigvuldigen; breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0;  

Met deze techniek kunnen we de omgeving rondom de tekst inkleuren met de afbeeldingsachtergrond:

Merk op dat de techniek alleen goed werkt met subtiele transparante kleuren. Als u een volledig dekkende kleur of een kleur gebruikt die niet overeenkomt met de afbeelding, krijgt de afbeelding die in de tekst wordt weergegeven een zeer zichtbare tint van de gebruikte kleur, dus tenzij het een look is waar u voor kiest, vermijd ondoorzichtige kleuren.

2. Tekst omgeven door de achtergrond van de afbeelding

Alhoewel een normale tekstplaatsing over een beeldachtergrond vereist dezelfde techniek, Ik ga je een voorbeeld laten zien van hoe de bovenstaande demo eruit ziet als de effect is omgekeerd, d.w.z. wanneer de tekstkleur wit is en de achtergrond zwart is.

 .tekst kleur: wit; achtergrondkleur: zwart; mix-blend-modus: scherm; breedte: 100%; hoogte: 100%; lettergrootte: 160pt; lettertype-gewicht: vetter; text-align: center; regelhoogte: 210 px; marge: 0;  

U kunt de dezelfde overlay om wat kleur toe te voegen aan de tekst, tenzij je het wit wilt houden.

 .overlay background-colour: rgba (0,255,255, .1); mix-blend-modus: vermenigvuldigen; breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0;  

En hieronder kunt u zien hoe de omgekeerde situatie eruit ziet:

Merk op dat in Internet Explorer, of elke andere browser die geen ondersteuning biedt voor de mix-blend-modus eigenschap, de achtergrondafbeelding wordt niet weergegeven en de tekst blijft zwart (of wit).