Autor publikacji
Virtual Patriot - Administrator

background-blend-mode

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości background-blend-mode

Za pomocą właściwości background-blend-mode możemy określić tryb mieszania się (piksel po pikselu) kolorów teł interesującego nas elementu HTML. Mowa tu o kolorach tła obrazkowego elementu HTML, jak również o kolorze tła nieobrazkowego elementu HTML.

Informacje dodatkowe

mieszanie się kolorów teł elementu HTML rozpoczyna się od ostatniego tła posiadanego przez element HTML

Informacje techniczne o właściwości background-blend-mode

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości background-blend-mode

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości background-blend-mode

normal

Wyjaśnienie

Wartość normal jest domyślną wartością właściwości background-blend-mode.

Domyślnie kolory teł elementu HTML nie mieszają się ze sobą.

Przykład

  background-blend-mode:normal;

Kolory teł przykładowego elementu "div" nie mieszają się ze sobą.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

multiply

Wyjaśnienie

Za pomocą wartości multiply właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb multiply. Tryb multiply oznacza mnożenie kolorów, co w praktyce oznacza, że po zmieszaniu się ze sobą koloru górnego z kolorem dolnym, finalny kolor nigdy nie będzie jaśniejszy od kolorów, które zostały ze sobą zmieszane. Ponadto kolor górny czarny pozostaje bez zmian, natomiast kolor górny biały zostaje zamieniony niezmienionym kolorem dolnym.

Przykład

  background-blend-mode:multiply;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "multiply", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "multiply".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:multiply;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

screen

Wyjaśnienie

Za pomocą wartości screen właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb screen. Tryb screen oznacza, że po zmieszaniu się ze sobą koloru górnego z kolorem dolnym, finalny kolor nigdy nie będzie ciemniejszy od kolorów, które zostały ze sobą zmieszane. Ponadto kolor górny czarny zostaje zamieniony niezmienionym kolorem dolnym, natomiast kolor górny biały pozostaje bez zmian.

Przykład

  background-blend-mode:screen;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "screen", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "screen".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:screen;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

overlay

Wyjaśnienie

Za pomocą wartości overlay właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb overlay. Tryb overlay oznacza, że jeżeli po porównaniu ze sobą koloru górnego oraz koloru dolnego, kolor górny jest kolorem jaśniejszym, wtedy finalnym kolorem będzie kolor produkowany przez tryb multiply, natomiast w przeciwnym wypadku finalnym kolorem będzie kolor produkowany przez tryb screen.

Przykład

  background-blend-mode:overlay;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "overlay", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "overlay".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:overlay;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

darken

Wyjaśnienie

Za pomocą wartości darken właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb darken. Tryb darken oznacza, że po porównaniu ze sobą koloru górnego oraz koloru dolnego, finalnym kolorem będzie ten kolor, który był ciemniejszy.

Przykład

  background-blend-mode:darken;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "darken", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "darken".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:darken;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

lighten

Wyjaśnienie

Za pomocą wartości lighten właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb lighten. Tryb lighten oznacza, że po porównaniu ze sobą koloru górnego oraz koloru dolnego, finalnym kolorem będzie ten kolor, który był jaśniejszy.

Przykład

  background-blend-mode:lighten;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "lighten", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "lighten".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:lighten;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

color-dodge

Wyjaśnienie

Za pomocą wartości color-dodge właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb color-dodge. Tryb color-dodge oznacza, że finalnym kolorem będzie rozjaśniony kolor dolny. Ponadto kolor górny czarny zostaje zamieniony niezmienionym kolorem dolnym.

Przykład

  background-blend-mode:color-dodge;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "color-dodge", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "color-dodge".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:color-dodge;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

color-burn

Wyjaśnienie

Za pomocą wartości color-burn właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb color-burn. Tryb color-burn oznacza, że finalnym kolorem będzie przyciemniony kolor dolny. Ponadto kolor górny biały zostaje zamieniony niezmienionym kolorem dolnym.

Przykład

  background-blend-mode:color-burn;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "color-burn", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "color-burn".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:color-burn;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

hard-light

Wyjaśnienie

Za pomocą wartości hard-light właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb hard-light. Tryb hard-light oznacza, że jeżeli po porównaniu ze sobą koloru górnego oraz koloru dolnego, kolor górny jest kolorem ciemniejszym, wtedy finalnym kolorem będzie kolor produkowany przez tryb multiply, natomiast w przeciwnym wypadku finalnym kolorem będzie kolor produkowany przez tryb screen.

Przykład

  background-blend-mode:hard-light;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "hard-light", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "hard-light".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:hard-light;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

soft-light

Wyjaśnienie

Za pomocą wartości soft-light właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb soft-light. Tryb soft-light działa na podobnej zasadzie do trybu overlay z tą różnicą, iż finalny kolor jest bardziej łagodny.

Przykład

  background-blend-mode:soft-light;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "soft-light", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "soft-light".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:soft-light;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

difference

Wyjaśnienie

Za pomocą wartości difference właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb difference. Tryb difference oznacza odejmowanie kolorów, co w praktyce oznacza, że po porównaniu ze sobą koloru górnego oraz koloru dolnego, finalnym kolorem będzie kolor wynikający z odjęcia ciemniejszego koloru od jaśniejszego koloru. Ponadto kolor górny czarny zostaje zamieniony niezmienionym kolorem dolnym.

Przykład

  background-blend-mode:difference;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "difference", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "difference".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:difference;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

exclusion

Wyjaśnienie

Za pomocą wartości exclusion właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb exclusion. Tryb exclusion działa na podobnej zasadzie do trybu difference z tą różnicą, iż finalny kolor posiada mniejsze zróżnicowanie. Ponadto kolor górny czarny zostaje zamieniony niezmienionym kolorem dolnym.

Przykład

  background-blend-mode:exclusion;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "exclusion", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "exclusion".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:exclusion;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

hue

Wyjaśnienie

Za pomocą wartości hue właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb hue. Tryb hue oznacza, że finalnym kolorem będzie kolor posiadający odcień koloru górnego oraz nasycenie i jasność koloru dolnego.

Przykład

  background-blend-mode:hue;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "hue", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "hue".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:hue;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

saturation

Wyjaśnienie

Za pomocą wartości saturation właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb saturation. Tryb saturation oznacza, że finalnym kolorem będzie kolor posiadający nasycenie koloru górnego oraz odcień i jasność koloru dolnego.

Przykład

  background-blend-mode:saturation;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "saturation", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "saturation".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:saturation;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

color

Wyjaśnienie

Za pomocą wartości color właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb color. Tryb color oznacza, że finalnym kolorem będzie kolor posiadający odcień i nasycenie koloru górnego oraz jasność koloru dolnego.

Przykład

  background-blend-mode:color;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "color", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "color".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:color;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

luminosity

Wyjaśnienie

Za pomocą wartości luminosity właściwości background-blend-mode możemy sprawić, że trybem mieszania się kolorów teł interesującego nas elementu HTML będzie tryb luminosity. Tryb luminosity oznacza, że finalnym kolorem będzie kolor posiadający jasność koloru górnego oraz odcień i nasycenie koloru dolnego.

Przykład

  background-blend-mode:luminosity;

Trybem mieszania się kolorów teł przykładowego elementu "img" jest tryb "luminosity", ponieważ do wspomnianego elementu "img" została dodana właściwość "background-blend-mode" wraz z wartością "luminosity".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:luminosity;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości background-blend-mode możemy określić tryb mieszania się kolorów poszczególnych teł interesującego nas elementu HTML.

Podana przez nas sekwencja wartości właściwości "background-blend-mode" nie może zawierać wartości globalnych.

Jeżeli podana przez nas sekwencja wartości właściwości "background-blend-mode" będzie zawierała mniejszą liczbę wartości niż liczba teł elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "background-blend-mode" tak, aby uzyskać wystarczającą liczbę wartości.

Jeżeli nie chcemy, aby kolory ostatniego obrazka tworzącego tło obrazkowe elementu HTML mieszały się z kolorem tła tego elementu HTML, wtedy kolor tła elementu HTML powinien być w pełni przezroczysty lub trybem mieszania się kolorów wspomnianych teł powinien być tryb normal.

Przykład

  background-blend-mode:darken, luminosity;

Trybem mieszania się koloru tła przykładowego elementu "div" z kolorami drugiego obrazka tworzącego tło obrazkowe przykładowego elementu "div" jest tryb "luminosity", natomiast trybem mieszania się kolorów drugiego obrazka tworzącego tło obrazkowe przykładowego elementu "div" z kolorami pierwszego obrazka tworzącego tło obrazkowe przykładowego elementu "div" jest tryb "darken", ponieważ do wspomnianego elementu "div" została dodana właściwość "background-blend-mode" wraz z następującą sekwencją wartości: "darken, luminosity".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-blend-mode:darken, luminosity;
        background-color:red;
        background-image:linear-gradient(to right, rgba(0, 255, 0, 1), rgba(0, 0, 255, 0.5)), url(https://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>