ميزة background-blend-mode CSS

تعريف والاستخدام

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 Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1