Achtergrond-blend-mode - CSS-trucs

De background-blend-modeeigenschap definieert hoe een element background-imagemoet mengen met zijn background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Zie de Pen background-blend-mode door CSS-Tricks (@ css-tricks) op CodePen.

In de demo hierboven heeft de standaard background-imageaan de linkerkant geen overvloeimodus ingesteld en dus overlapt de afbeelding de background-color. Aan de rechterkant heeft de mengmodus de background-imagemet het rood background-coloreronder gewijzigd . Maar merk op dat de tekstkleur niet is aangetast door deze extra eigenschap.

Waarden

initial: de standaardwaarde zonder mengen.
inherit: neemt de overvloeimodus van het bovenliggende element over.
: een waarde die de achtergrondafbeelding zal veranderen afhankelijk van de achtergrondkleur.

De waarde kan worden ingesteld als een van de volgende (in de demo's hieronder background-coloris rood):

`luminosity`: de helderheid van de topkleur blijft behouden terwijl de verzadiging en tint van de achtergrondkleur wordt gebruikt.

Demo

Hier is een werkend voorbeeld van hoe die waarden worden geïnterpreteerd, afhankelijk van background-color:

Zie de mengmodus Pen-achtergrond door CSS-Tricks (@ css-tricks) op CodePen.

Meerdere mengmodi koppelen

Elke achtergrondlaag kan maar een enkele mengmodus hebben, maar als we bijvoorbeeld meerdere lineaire verlopen gebruiken, kan elk van hen hun eigen mengmodus hebben, wat zorgt voor een interessante weergave:

Zie de Pen Gradients en background-blend-mode door CSS-Tricks (@ css-tricks) op CodePen.

Dit wordt bereikt door deze waarden op te sommen in de volgorde van de achtergrondlaag die u wilt aanbrengen:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

De eerste lineaire gradiënt heeft de screenmengmodus, gevolgd door de tweede lineaire gradiënt die er is differenceen de eerste achtergrondafbeelding die erop is lightentoegepast.