Autor publikacji: Virtual Patriot - Administrator

mix-blend-mode

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - mix-blend-mode property (LV1)

Przeznaczenie właściwości `mix-blend-mode`

Za pomocą właściwości mix-blend-mode możemy określić tryb mieszania się (piksel po pikselu) kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego elementu HTML. Mowa tu o wszystkich kolorach elementu HTML w tym również kolorach ewentualnych elementów potomków.

Informacje dodatkowe: gdy element przodek oraz element potomek posiadają właściwość mix-blend-mode wraz z wartością różną od wartości normal, wtedy mieszanie się kolorów rozpoczyna się od elementu potomka

Informacje techniczne o właściwości `mix-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 `mix-blend-mode`

: tak
: tak
: tak
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji właściwości mix-blend-mode.

Opis wartości właściwości `mix-blend-mode`

normal

Wyjaśnienie

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

Domyślnie kolory elementu HTML nie mieszają się z kolorami występującymi pod obszarem tego elementu HTML.

Przykład

  mix-blend-mode:normal;

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode

Kolory przykładowego elementu "img" nie mieszają się z kolorami przykładowego elementu "div".

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, lime, blue);
        padding:1em;
      }

      div > img {
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

multiply

Wyjaśnienie

Za pomocą wartości multiply właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:multiply;

obrazek po zmianie kolorystyki za pomocą wartości multiply właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "multiply", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:multiply;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

screen

Wyjaśnienie

Za pomocą wartości screen właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:screen;

obrazek po zmianie kolorystyki za pomocą wartości screen właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "screen", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:screen;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

overlay

Wyjaśnienie

Za pomocą wartości overlay właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:overlay;

obrazek po zmianie kolorystyki za pomocą wartości overlay właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "overlay", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:overlay;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

darken

Wyjaśnienie

Za pomocą wartości darken właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:darken;

obrazek po zmianie kolorystyki za pomocą wartości darken właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "darken", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:darken;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

lighten

Wyjaśnienie

Za pomocą wartości lighten właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:lighten;

obrazek po zmianie kolorystyki za pomocą wartości lighten właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "lighten", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:lighten;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

color-dodge

Wyjaśnienie

Za pomocą wartości color-dodge właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:color-dodge;

obrazek po zmianie kolorystyki za pomocą wartości color-dodge właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "color-dodge", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:color-dodge;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

color-burn

Wyjaśnienie

Za pomocą wartości color-burn właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:color-burn;

obrazek po zmianie kolorystyki za pomocą wartości color-burn właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "color-burn", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:color-burn;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

hard-light

Wyjaśnienie

Za pomocą wartości hard-light właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:hard-light;

obrazek po zmianie kolorystyki za pomocą wartości hard-light właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "hard-light", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:hard-light;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

soft-light

Wyjaśnienie

Za pomocą wartości soft-light właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:soft-light;

obrazek po zmianie kolorystyki za pomocą wartości soft-light właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "soft-light", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:soft-light;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

difference

Wyjaśnienie

Za pomocą wartości difference właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:difference;

obrazek po zmianie kolorystyki za pomocą wartości difference właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "difference", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:difference;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

exclusion

Wyjaśnienie

Za pomocą wartości exclusion właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:exclusion;

obrazek po zmianie kolorystyki za pomocą wartości exclusion właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "exclusion", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:exclusion;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

hue

Wyjaśnienie

Za pomocą wartości hue właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:hue;

obrazek po zmianie kolorystyki za pomocą wartości hue właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "hue", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:hue;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

saturation

Wyjaśnienie

Za pomocą wartości saturation właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:saturation;

obrazek po zmianie kolorystyki za pomocą wartości saturation właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "saturation", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:saturation;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

color

Wyjaśnienie

Za pomocą wartości color właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:color;

obrazek po zmianie kolorystyki za pomocą wartości color właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "color", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:color;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

luminosity

Wyjaśnienie

Za pomocą wartości luminosity właściwości mix-blend-mode możemy sprawić, że trybem mieszania się kolorów interesującego nas elementu HTML z kolorami występującymi pod obszarem tego 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

  mix-blend-mode:luminosity;

obrazek po zmianie kolorystyki za pomocą wartości luminosity właściwości mix-blend-mode

Trybem mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div" jest tryb "luminosity", ponieważ do wspomnianego elementu "img" została dodana właściwość "mix-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-image:linear-gradient(to right, lime, blue);
        padding:1em;
      }

      div > img {
        mix-blend-mode:luminosity;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>