سی ایس ایس بیک گراؤنڈ-بلینڈ مائڈ پرپرٹی

定义和用法

background-blend-mode 属性定义每个背景层（颜色和/或图像）的混合模式。

另请参阅：

CSS 教程：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
جسمانی زبان: 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 سافری
Chrome Edge Firefox Safari سافری
آپریا 35.0 79.0 30.0 7.1