سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته با با ویژگی background-attachment آشنا شدیم و آموختیم که از این ویژگی برای این استفاده می شود که تعیین شود آیا یک تصویر پس زمینه با بقیه صفحه پیمایش شود یا ثابت بماند.
در این جلسه آموزش کار با ویژگی background-blend-mode در CSS را به علاقمندان این دوره ارائه می نماییم.
آموزش کار با ویژگی background-blend-mode در CSS
به مثال زیر توجه نمایید. در این مثال blending mode یا حالت ترکیبی تصویر پس زمینه را برای روشن تر شدن مشخص کرده ایم.
مثال :
| div { background-repeat: no-repeat, repeat; background-image: url("img_tree.gif"), url("paper.gif"); background-blend-mode: lighten; } |
تعریف و کاربرد
ویژگی background-blend-mode حالت ترکیبی هر یک از لایه های پس زمینه( هم رنگ و هم تصویر ) را تعریف می کند.
| مقدار پیش فرض | normal |
| به ارث بردن | خیر |
| متحرک بودن | خیر |
| نسخه | CSS3 |
| سینتکس JavaScript | “object.style.backgroundBlendMode=”screen |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی background-blend-mode در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| background-blend-mode | ۳۵٫۰ | ۳۰٫۰ | ۲۲٫۰ | ۷٫۱ | پشتیبانی نمی شود |
سینتکس CSS
مثال :
| background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; |
مقدار ویژگی
| مقدار | توضیح |
|---|
| normal | حالت پیش فرض – حالت ترکیب را به حالت عادی یا normal تنظیم می کند. |
| multiply | حالت ترکیب را برای حالت multiply یا تکثیر تنظیم می کند |
| screen | حالت ترکیب را روی صفحه نمایش یا screen تنظیم می کند. |
| overlay | حالت ترکیب را روی overlay قرار می دهد. |
| darken | حالت ترکیب را تیره تر می کند. |
| lighten | حالت ترکیبی را برای روشن شدن تنظیم می کند. |
| color-dodge | حالت ترکیب را به حالت color-dodge تنظیم می کند. |
| saturation | حالت ترکیب را به saturation تنظیم می کند. |
| color | حالت ترکیب را به color تنظیم می کند. |
| luminosity | حالت ترکیب را درخشندگی یا luminosity قرار می دهد. |
مثال های بیشتر
مثال یک
مثال یک حالت ترکیب را برای حالت 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; } |
مثال چهار
مثال چهار حالت ترکیب را تیره تر می کند.
مثال :
| 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; } |
کلام آخر
در این جلسه به آموزش کار با ویژگی background-blend-mode در CSS پرداختیم و آموختیم که ویژگی background-blend-mode حالت ترکیبی هر یک از لایه های پس زمینه را تعریف می کند.
در جلسه آینده به کار با ویژگی background-clip خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
