ລະບົບຄຸນະພາບ mix-blend-mode

定义和用法

mix-blend-mode 属性规定元素的内容应如何与其直接父背景混合。

ບໍ່ວ່າ:

ປຶ້ມການປົກຄອງ CSS:ປະສົມຕົວຂອງ background-blend-mode CSS

ຕົວຢ່າງ

ຄອມມູນຄ່າທີ່ມີສີກາກບານ, ແລະພາບທີ່ກະຈາຍກັບຄອມມູນຄ່າດັ່ງກ່າວ (ດຳ):

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

ທຳການພະຍາຍາມດຽວຕົວເອງ

ສາມາດຫາຫຼັກຖານ TIY ຫຼາຍຫຼັກກັນໃນບ່ອນດ້ານລຸ່ມຂອງເວັບໄຊ.

ສັບພາສາ CSS

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

ຄູ່ມືຂອງບັນດາປະສົມປະສານ

ຄູ່ມື ການອະທິບາຍ
normal ນີ້ແມ່ນຄູ່ມືສົມບູນ. ການຕັ້ງການປະສົມວຽກກັບ normal.
multiply ການຕັ້ງການປະສົມວຽກກັບ multiply.
screen ການຕັ້ງການປະສົມວຽກກັບ screen.
overlay ການຕັ້ງການປະສົມວຽກກັບ overlay.
darken ການຕັ້ງການປະສົມວຽກກັບ darken.
lighten ການຕັ້ງການປະສົມວຽກກັບ lighten.
color-dodge ການຕັ້ງການປະສົມວຽກກັບ color-dodge.
color-burn ການຕັ້ງການປະສົມວຽກກັບ color-burn.
difference ການຕັ້ງການປະສົມວຽກກັບ difference.
exclusion ການຕັ້ງການປະສົມວຽກກັບ exclusion.
hue ການຕັ້ງການປະສົມວຽກກັບ hue.
saturation ການຕັ້ງການປະສົມວຽກກັບ saturation.
color ການຕັ້ງການປະສົມວຽກກັບ color.
luminosity ການຕັ້ງການປະສົມວຽກກັບ luminosity.

ລາຍລະອຽດດ້ານເຕັກນິກ

ຄູ່ມືສົມບູນ: normal
ການລວບລວມ: ບໍ່
ການສ້າງການອອກອາກາດ: ບໍ່ສາມາດນຳໃຊ້. ບັນປາກວດ:ບັນດາປະສົມປະສານທີ່ກ່ຽວກັບການອອກອາກາດ.
ສັບພາສາ JavaScript: object.style.mixBlendMode = "darken"

ຫຼັກຖານຫຼາຍຫຼັກກັນ

ຕົວຢ່າງ

ສະແດງທັງໝົດຄວາມຄືນ:

.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;}

ທຳການພະຍາຍາມດຽວຕົວເອງ

ຕົວຢ່າງ

ໃຊ້ mix-blend-mode ເພື່ອສ້າງ text cutout/knockout responsive:

.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;
}

ທຳການພະຍາຍາມດຽວຕົວເອງ

ການສະໜັບສະໜູນບັນຊີບາດບັດ

ໂຕມີທີ່ຂອງການສະໜັບສະໜູນປະສົມປະກອບຕົ້ນຂອງບັນຊີດັ່ງກ່າວ.

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