Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Właściwość CSS background-blend-mode

Definicja stylu, przeznaczenie i użycie background-blend-mode

Właściwość background-blend-mode określa tryb mieszania pikseli każdej warstwy tła (kolor i / lub obraz).

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

Wartość Opis
normal Domyślnie. Ustawia normalny tryb mieszania.
multiply Ustawia tryb mieszania na mnożenie.
screen Ustawia tryb mieszania na raster.
overlay Ustawia tryb mieszania na nakładkę.
darken Ustawia tryb mieszania na ciemniejszy.
lighten Ustawia tryb mieszania na jaśniejszy.
color-dodge Finalnym kolorem mieszania będzie rozjaśniony kolor dolny. Ponadto kolor górny czarny zostaje zamieniony niezmienionym kolorem dolnym.
saturation Ustawia tryb mieszania na nasycenie.
color Ustawia tryb mieszania na kolor. Finalnym kolorem będzie kolor posiadający odcień i nasycenie koloru górnego oraz jasność koloru dolnego.
luminosity Ustawia tryb mieszania na jasność. Tryb luminosity oznacza, że finalnym kolorem będzie kolor posiadający jasność koloru górnego oraz odcień i nasycenie koloru dolnego.

Składnia CSS background-blend-mode

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

Wsparcie przeglądarek dla właściwości background-blend-mode

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość chrome edge firefox safari opera
background-blend-mode 35.0 79.0 30.0 7.1 22.0

 

Przykładowe zastosowania właściwości background-blend-mode

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:
background-blend-mode:

 
Rezultat:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Kod CSS:
#myDIV {
width: 200px;
height: 300px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(to right,blue 0%,red 100%),url('/images/kurs-style-css/yin-yang.jpg');
background-blend-mode: normal;
}
 

 

Przykłady właściwości background-blend-mode

background-blend-mode: lighten;

background-blend-mode: multiply;

background-blend-mode: screen;

background-blend-mode: overlay;

background-blend-mode: darken;

background-blend-mode: color-dodge;

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Obszar działalności
Tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel.: +48 780 060 995, pon. - czw. 8:00 - 16:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności

Marynarska 54, 59-220 Legnica,, dolnośląskie, Polska,
tel.: +48 780 060 995,
pon. - czw. 8:00 - 16:00