صفت background-blend-mode در css
صفت background-blend-mode در css ترکیب رنگ پس زمینه
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی background-blend-mode در زبان css توضیحاتی را ارائه نماییم.
ویژگی background-blend-mode در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
معرفی و کاربرد ویژگی background-blend-mode در زبان طراحی سی اس اس
خاصیت background-blend-mode برای تعیین حالت آمیختگی رنگ در لایه های مختلف پس زمینه یک تگ html استفاده می شود.
مقادیر خاصیت background-blend-mode در زبان طراحی css
صفت جدید background-blend-mode که در زبان طراحی CSS3 معرفی شده است، 10 مقدار می پذیرد که عبارتند از:
- مقدار normal
- مقدار multiply
- مقدار screen
- مقدار overlay
- مقدار darken
- مقدار lighten
- مقدار color-dodge
- مقدار saturation
- مقدار color
- مقدار luminosity
مقدار normal درون خاصیت background-blend-mode در زبان سی اس اس
اگر خاصیت background-blend-mode را برابر با مقدار normal قرار دهیم، در این حالت می توانیم ترکیب رنگ پس زمینه را برای تگ html مربوطه در وضعیت نرمال تعیین کنیم.
این مقدار به عنوان مقدار پیش فرض ویژگی background-blend-mode می باشد.
مثال براساس مقدار normal برای خاصیت background-blend-mode
div{background-blend-mode:normal;}
مقدار multiply درون خاصیت background-blend-mode در زبان css
اگر خاصیت background-blend-mode را برابر با مقدار multiply قرار دهیم، رنگ هر پیکسل تصویر و رنگ پس زمینه به شکل متناظر در هم ضرب می شود و یک رنگ جدید برای همان پیکسل در تگ html مربوطه بدست می آید.
مثال براساس مقدار multiply برای خاصیت background-blend-mode
div{background-blend-mode:multiply;}
مقدار screen درون خاصیت background-blend-mode در زبان سی اس اس
اگر خاصیت background-blend-mode را برابر با مقدار screen قرار دهیم، رنگ هر پیکسل تصویر و رنگ پس زمینه در هم ضرب شده و در تگ html مربوطه معکوس می شوند.
مثال براساس مقدار screen برای خاصیت background-blend-mode
div{background-blend-mode:screen;}
مقدار overlay درون خاصیت background-blend-mode در زبان css
اگر خاصیت background-blend-mode را برابر با مقدار overlay قرار دهیم، می توانیم ترکیبی از دو مقدار screen و multiply را در تگ html مربوطه تعیین نماییم.
مثال براساس مقدار overlay برای خاصیت background-blend-mode
div{background-blend-mode:overlay;}
صفت background-blend-mode در css ترکیب رنگ پس زمینه
مقدار darken درون صفت background-blend-mode در css
اگر خاصیت background-blend-mode را برابر با مقدار darken قرار دهیم، هر پیکسل رنگ پس زمینه با پیکسل متناظر تصویر مقایسه می شود. و هر کدام از رنگ ها که تیره تر باشد انتخاب شده و درون پیکسل تگ html مربوطه قرار می گیرد.
مثال براساس مقدار darken برای خاصیت background-blend-mode
div{background-blend-mode:darken;}
مقدار lighten درون خاصیت background-blend-mode در زبان css
اگر خاصیت background-blend-mode را برابر با مقدار lighten قرار دهیم، هر پیکسل رنگ پس زمینه با پیکسل متناظر تصویر مقایسه می شود. و هر کدام از رنگ ها که روشن تر باشد انتخاب شده و درون پیکسل تگ html مربوطه قرار می گیرد.
مثال براساس مقدار lighten برای خاصیت background-blend-mode
div{background-blend-mode:lighten;}
مقدار color-dodge درون صفت background-blend-mode در css
اگر خاصیت background را برابر با مقدار color-dodge قرار دهیم، پیکسل رنگ پس زمینه بر پیکسل رنگ تصویر در تگ html مربوطه معکوس شده و تقسیم می شود.
برای کسب اطلاعات بیشتر در مورد یادگیری طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
مثال براساس مقدار color-dodge برای خاصیت background-blend-mode
div{background-blend-mode:color-dodge;}
مقدار saturation درون خاصیت background-blend-mode در زبان سی اس اس
اگر خاصیت background-blend-mode را برابر با مقدار saturation قرار دهیم، پیکسل رنگ پس زمینه بر پیکسل رنگ تصویر در تگ html مربوطه به صورت اشباع ترکیب می شوند.
مثال براساس مقدار saturation برای خاصیت background-blend-mode
div{background-blend-mode:saturation;}
مقدار color درون خاصیت background-blend-mode در زبان سی اس اس
اگر خاصیت background-blend-mode را برابر با مقدار color تعریف کنیم، پیکسل رنگ های پس زمینه با پیکسل رنگ های تصویر در تگ html مربوطه با هم ترکیب می شوند.
مثال براساس مقدار color برای خاصیت background-blend-mode
div{background-blend-mode:color;}
مقدار luminosity درون صفت background-blend-mode در css
اگر خاصیت background-blend-mode را برابر با مقدار luminosity تعریف کنیم، پیکسل رنگ های پس زمینه با پیکسل رنگ های تصویر در تگ html مربوطه با هم به شیوه luminosity ترکیب می شوند.
مثال براساس مقدار luminosity برای خاصیت background-blend-mode
div{background-blend-mode:luminosity;}
بررسی خاصیت background-blend-mode از نظر نسخه زبان طراحی سی اس اس
ویژگی background-blend-mode در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.
بررسی ساختاری خصوصیت background-blend-mode
عناوین ساختاری خاصیت background-blend-mode | وضعیت ساختاری خاصیت background-blend-mode |
مقدار پیش فرض | normal |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.backgroundBlendMode="screen |
پشتیبانی مرورگرهای اینترنتی از صفت background-blend-mode در css
خاصیت css | |||||
background-blend-mode | 35.0 | عدم پشتیبانی | 30.0 | 7.1 | 22.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت background-blend-mode در css ترکیب رنگ css3 – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید