آموزش ویژگی background-blend-mode در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-blend-mode در CSS با من همراه باشید.

آموزش ویژگی background-blend-mode در CSS

Free-Learn

ویژگی background-blend-mode در CSS

با استفاده از ویژگی background-blend-mode در CSS میتوان رنگ زمینه را با تصویر زمینه مخلوط یا ترکیب کرد، یعنی مثلا اگه رنگ زمینه قرمز باشه میتونیم همین رنگ رو با تصویر زمینه مخلوط کنیم.

در نتیجه میشه تصویر زمینه را بصورت رنگی نمایش داد، بطور کلی با استفاده از این ویژگی میتوان افکت های رنگی را بروی تصاویر قرار داد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی background-blend-mode را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از مقدار screen

امتحان کنید

مثال شماره ۲ : استفاده از مقدار multiply

امتحان کنید

Free-Learn

جدول مشخصات ویژگی background-blend-mode در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض normal
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.backgroundBlendMode=”screen”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-blend-mode در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
background-blend-mode ۳۵٫۰ ۳۰٫۰ ۲۲٫۰ ۷٫۱ خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی background-blend-mode در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
normal پیش فرض – ترکیب رنگ زمینه با تصویر زمینه با حالت normal
multiply ترکیب رنگ زمینه با تصویر زمینه با حالت multiply
screen ترکیب رنگ زمینه با تصویر زمینه با حالت screen
overlay ترکیب رنگ زمینه با تصویر زمینه با حالت overlay
darken ترکیب رنگ زمینه با تصویر زمینه با حالت darken
lighten ترکیب رنگ زمینه با تصویر زمینه با حالت lighten
color-dodge ترکیب رنگ زمینه با تصویر زمینه با حالت color-dodge
saturation ترکیب رنگ زمینه با تصویر زمینه با حالت saturation
color ترکیب رنگ زمینه با تصویر زمینه با حالت color
luminosity ترکیب رنگ زمینه با تصویر زمینه با حالت luminosity

Free-Learn

نکات و توضیحات

  • این ویژگی در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.

حتما باید رنگ زمینه ( background-color ) وجود داشته باشد تا بتواند با تصویر مخلوط شود در غیراینصورت این ویژگی بی اثر خواهد ماند.

Free-Learn

دریافت PDF یا پرینت این مطلب