CSS blend

V případě, že nastavíme nějakému elementu obrázek na pozadí a zároveň barvu, background-blend-mode umožní tyto dvě složky smíchat (anglicky blend). Obrázek tedy nemusí být průhledný, aby se za ním barva projevila.

Míchání popdporuje Chrome 35, Firefox 30, Safari 7.1 i Opera 22. IE zatím nikoliv.

Symbolický zápis vypadá následovně.

element {
  background-image: url(url obrázku);
  background-color: barva pozadí;
  background-blend-mode: typ;
}

Za typ se potom zadává něco z mnoha hodnot: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosit.

Nejlepší bude si to vyzkoušet (typů je možné zadávat i několik zároveň – při zápisu CSS se oddělí čárkou).

Typ background-blend-mode:

Test na samostatné stránce

Vlastnost mix-blend-mode

Pro míchání libovolných elementů (ne jen obrázku a barevného pozadí) existuje vlastnost mix-blend-mode. Podpora v prohlížečí je ale zatím nedostatečná. V Chrome a Opeře se musí zapnout v chrome://flags, resp. opera://flags.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Image-rendering

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

CSS mask

CSS vlastnost mask

Vlastnost mask dokáže vytvářet elementy s texturou nebo nepravidelnými tvary.

Background-clip

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

Border-image

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

Object-fit

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

Komentáře