CSS mix-blend-mode ominaisuus

Määritelmä ja käyttö

mix-blend-mode-ominaisuus määrittää, miten elementin sisältö yhdistetään suoraan edeltävänä taustana.

Katso myös:

CSS-käyttöohjeet:CSS background-blend-mode ominaisuus

Esimerkki

Kontti, jolla on punainen tausta, ja tähän punaiseen konttiin yhdistetty kuva (pimeä):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Kokeile itse

Lisää TIY-esimerkkejä löytyy sivun alalta.

CSS-kieli

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Ominaisuuden arvo

Arvo Kuvaus
normal Tämä on oletusarvo. Aseta yhdistämismode tavalliseksi.
multiply Aseta yhdistämismode multiplyksi.
screen Aseta yhdistämismode screeniksi.
overlay Aseta yhdistämismode overlayksi.
darken Aseta yhdistämismode darkeniksi.
lighten Aseta yhdistämismode lighteniksi.
color-dodge Aseta yhdistämismode color-dodgeksi.
color-burn Aseta yhdistämismode color-burniksi.
difference Aseta yhdistämismode differenceksi.
exclusion Aseta yhdistämismode exclusioniksi.
hue Aseta yhdistämismode hueksi.
saturation Aseta yhdistämismode saturationiksi.
color Aseta yhdistämismode coloriksi.
luminosity Aseta yhdistämismode luminosityksi.

Tekninen yksityiskohta

Oletusarvo: normal
Perintä: Ei
Animaatioiden luominen: Ei tuettu. Katso:Animaatiotunnukset.
JavaScript-kieli: object.style.mixBlendMode = "darken"

Lisää esimerkkejä

Esimerkki

Näytä kaikki arvot:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Kokeile itse

Esimerkki

Käytä mix-blend-mode:ä luodaksesi responsiivisen cutout/knockout-tekstin (kuviollinen teksti):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Kokeile itse

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka täysin tukee tätä ominaisuutta.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0