Mix-blend-mode - CSS-triki

Satura rādītājs:

Anonim

mix-blend-modeĪpašumu definē kā elements, saturam vajadzētu saplūst ar savu fonu. Piemēram, a

varētu interesantā veidā saplūst ar fonu aiz tā. 
.blend ( mix-blend-mode: exclusion; )

Iepriekš minētajā piemērā saturs ir modificēts mix-blend-modetā, ka teksta krāsas tiek izslēgtas no tā fona. Šī ir tikai viena no daudzajām šī īpašuma vērtībām.

Ir problēma ar pārlūku Chrome 58+, kur mix-blend-modetie netiks parādīti elementiem, kas iestatīti uz caurspīdīga . Pārlūkā Chrome biļete ir izsniegta kā 711955 izdevums, kas tiek piešķirts šīs rakstīšanas laikā. Tikmēr vienkāršs labojums ir ķermeņa elementam piešķirt baltu (vai tiešām jebkuru) fona krāsu.

Vērtības

  • initial: rekvizīta noklusējuma iestatījums, kurā nav iestatīts sajaukšanas režīms.
  • inherit: elements mantos sajaukšanas režīmu no tā pamatelementa.
  • unset: noņem elementa pašreizējo sajaukšanas režīmu.
  • : tas ir atribūts vienam no maisīšanas režīmiem zemāk:
  • normal: šis atribūts nepielieto nekādu sajaukšanos.
  • multiply: elements tiek reizināts ar fonu un aizstāj fona krāsu. Rezultātā iegūtā krāsa vienmēr ir tikpat tumša kā fons.
  • screen: reizina fonu un saturs pēc tam papildina rezultātu. Tā rezultātā saturs būs gaišāks par background-color.
  • pārklājums: pavairo vai parāda saturu atkarībā no fona krāsas. Tas ir pretēji cietās gaismas sajaukšanas režīmam.
  • aptumšot: fons tiek aizstāts ar saturu, kur saturs ir tumšāks, pretējā gadījumā tas tiek atstāts kā bijis.
  • lighten: fons tiek aizstāts ar saturu, ja saturs ir gaišāks.
  • color-dodge: šis atribūts izgaismo fona krāsu, lai atspoguļotu satura krāsu.
  • color-burn: tas aptumšo fonu, lai atspoguļotu satura dabisko krāsu.
  • hard-light: atkarībā no satura krāsas šis atribūts to parādīs vai reizinās.
  • soft-light: atkarībā no satura krāsas tas to padarīs tumšāku vai gaišāku.
  • difference: tas atņem tumšāko no abām krāsām no gaišākās krāsas.
  • exclusion: līdzīgs, differencebet ar zemāku kontrastu.
  • hue: izveido krāsu ar satura nokrāsu apvienojumā ar fona piesātinājumu un spilgtumu.
  • saturation: izveido krāsu ar satura piesātinājumu apvienojumā ar fona nokrāsu un spilgtumu.
  • color: izveido krāsu ar satura nokrāsu, piesātinājumu un fona spilgtumu.
  • luminosity: izveido krāsu ar satura spilgtumu un fona nokrāsu un piesātinājumu. Šī ir coloratribūta apgrieztā vērtība .

Ir vērts atzīmēt, ka maisījuma režīma iestatīšana, izņemot normalģenerēšanu, rada jaunu sakraušanas kontekstu, kas pēc tam jāpievieno sakraušanas kontekstam, kurā ir elements.

Šo vērtību ietekme ir parādīta zemāk esošajā demonstrācijā:

Vairāk informācijas

  • CSS Blend režīmu pamati
  • mix-blend-mode MDN
  • mix-blend-mode uz W3C
  • CSS Blend Mode demonstrāciju kolekcija
  • Iepazīšanās ar CSS Blend Modes

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
41 32 Nē 79 TP

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. 14.0-14.4