Ostatnio edytowany:

mix-blend-mode

Autor: Virtual Patriot

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

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

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

Interpretacja właściwości mix-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 mix-blend-mode

normal

Opis

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

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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

multiply

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

screen

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

overlay

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

darken

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

lighten

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

color-dodge

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

color-burn

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

hard-light

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

soft-light

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

difference

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

exclusion

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

hue

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

saturation

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

color

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

luminosity

Opis

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

obrazek przed zmianą kolorystyki za pomocą właściwości mix-blend-mode
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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>