مثال
تحديد طريقة مزج:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
الخاصية background-مزيج وضع تحدد طريقة مزج كل طبقة الخلفية (color and/or image) .
| القيمة الافتراضية: | normal |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.backgroundBlendMode="screen" |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | غير معتمد | 30.0 | 7.1 | 22.0 |
CSS بناء الجملة
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| normal | هذا هو الافتراضي. تعيين طريقة مزج إلى وضعها الطبيعي | العبها " |
| multiply | تعيين طريقة مزج للضرب | العبها " |
| screen | تعيين طريقة مزج إلى الشاشة | العبها " |
| overlay | تعيين طريقة مزج لتراكب | العبها " |
| darken | تعيين طريقة مزج لتلقي بظلالها | العبها " |
| lighten | تعيين طريقة مزج لتخفيف | العبها " |
| color-dodge | تعيين طريقة مزج للون دودج | العبها " |
| saturation | تعيين طريقة مزج إلى التشبع | العبها " |
| color | تعيين طريقة لمزج الألوان | العبها " |
| luminosity | تعيين طريقة مزج لمعان | العبها " |
صفحات ذات صلة
درس CSS: CSS الخلفية