ميزة background-blend-mode CSS
- 22.0 الصفحة السابقة
- الصفحة التالية background-clip
تعريف والاستخدام
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 |
- 22.0 الصفحة السابقة
- الصفحة التالية background-clip