خصوصیت 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 | پیش‌فرض. مزایای ترکیبی را به معمولی تنظیم کنید. |
| ضرب | مزایای ترکیبی را به "ضرب" تنظیم کنید. |
| صفحه نمایش | مزایای ترکیبی را به "صفحه نمایش" تنظیم کنید. |
| پوشش | مزایای ترکیبی را به "پوشش" تنظیم کنید. |
| پوشش | مزایای ترکیبی را به "پوشش" تنظیم کنید. |
| تیرگی | مزایای ترکیبی را به "تیرگی" تنظیم کنید. |
| 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 | Safari |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Safari |
| Opera | 35.0 | 79.0 | 30.0 | 7.1 |
- 22.0 صفحه قبلی
- صفحه بعدی background-clip
