Ostatnio edytowany:

background-blend-mode

Autor: Virtual Patriot

Opis 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.

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

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

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

Firefox

tak

Google Chrome

tak

Safari

tak

Nie interpretuje wartości hue, saturation, color oraz luminosity.

Opera

tak

Internet Explorer

nie

Edge

nie

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

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

normal

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

multiply

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

screen

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

overlay

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

darken

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

lighten

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

color-dodge

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

color-burn

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

hard-light

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

soft-light

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

difference

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

exclusion

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

hue

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

saturation

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

color

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

luminosity

Opis

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

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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

sekwencja wartości

Opis

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ć osobny tryb mieszania się kolorów poszczególnych obrazków tworzących tło obrazkowe 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 obrazków tworzących tło obrazkowe 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ę wspomnianych kolorów powinien być tryb normal.

Przykład

Trybem mieszania się kolorów pierwszego obrazka tworzącego tło obrazkowe przykładowego elementu "div" z kolorami drugiego obrazka tworzącego tło obrazkowe przykładowego elementu "div" jest tryb "darken", natomiast trybem mieszania się kolorów drugiego obrazka tworzącego tło obrazkowe przykładowego elementu "div" z kolorem tła przykładowego elementu "div" jest tryb "luminosity", 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(http://webkod.pl/files/css/zwierze-03.png);
        width:350px;
        height:328px;
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>