CSS background-blend-mode 属性

ການອະທິບາຍແລະການນໍາໃຊ້

background-blend-mode ການສະເພາະການຄົງຂອງບັນດາລັກສະນະຫຼັງ (ສີແລະ/ຫຼືພາບ).

ອີງຕາມ:

CSS Tutorial:ຕົວກາງ CSS

实例

ການກະຈັດຄູ່ມວຍຂອງພາບຫຼັງເປັນ "lighten" (ການເຮັດໃຫ້ເລິກ):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

亲自试一试

ທ່ານຈະໄດ້ເຫັນຫຼາຍຫຍັງກ່ຽວກັບ TIY ຢູ່ດ້ານຫຼັງຂອງເວັບໄຊ.

ສັບສັນ CSS

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

ຄູ່ມວຍຂອງບັນດາລັກສະນະ

ຄູ່ມວຍ ການອະທິບາຍ
normal ຄົນທຳມະດາ. ການກະຈັດຄູ່ມວຍເປັນທຳມະດາ.
multiply ການກະຈັດຄູ່ມວຍເປັນ multiply (ການກະຈັດຄູ່ມວຍ).
screen ການກະຈັດຄູ່ມວຍເປັນ screen (ການສະແດງສະໜາມ).
overlay ການກະຈັດຄູ່ມວຍເປັນ overlay (ການປົກປິດ).
darken ການກະຈັດຄູ່ມວຍເປັນ overlay (ການປົກປິດ).
lighten ການກະຈັດຄູ່ມວຍງາມເປັນ lighten (ການເຮັດໃຫ້ເລິກ).
color-dodge 把混合模式设置为 color-dodge（颜色减淡）。
saturation 把混合模式设置为 saturation（饱和度）。
color 把混合模式设置为 color（颜色）。
luminosity 把混合模式设置为 luminosity（亮度）。

技术细节

默认值： normal
继承： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.backgroundBlendMode="screen"

更多实例

实例

把混合模式指定为 "multiply"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

亲自试一试

实例

把混合模式指定为 "screen"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

亲自试一试

实例

把混合模式指定为 "overlay"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

亲自试一试

实例

把混合模式指定为 "darken"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

亲自试一试

实例

把混合模式指定为 "color-dodge"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

亲自试一试

实例

把混合模式指定为 "saturation"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

亲自试一试

实例

把混合模式指定为 "color"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

亲自试一试

实例

把混合模式指定为 "luminosity"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

亲自试一试

实例

把混合模式指定为 "normal"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
35.0 79.0 30.0 7.1 22.0