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

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

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

Free-Learn

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

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

Free-Learn

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

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

مثال شماره ۱ : ترکیب تصویر با رنگ زمینه عنصر پدر

امتحان کنید

مثال شماره ۲ : ترکیب متن با تصویر زمینه عنصر پدر

امتحان کنید

Free-Learn

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

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

مقدار پیش فرض normal
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه Compositing and Blending Level 1
نحوه استفاده در جاوااسکریپت object.style.mixBlendMode = “darken”;

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
mix-blend-mode ۴۱٫۰ ۳۲٫۰ ۲۸٫۰ ۸٫۰ خیر

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

مقدار توضیح
normal پیش فرض – ترکیب محتوا با زمینه با حالت normal
multiply ترکیب محتوا با زمینه با حالت multiply
screen ترکیب محتوا با زمینه با حالت screen
overlay ترکیب محتوا با زمینه با حالت overlay
darken ترکیب محتوا با زمینه با حالت darken
lighten ترکیب محتوا با زمینه با حالت lighten
color-dodge ترکیب محتوا با زمینه با حالت color-dodge
color-burn ترکیب محتوا با زمینه با حالت color-burn
difference ترکیب محتوا با زمینه با حالت difference
exclusion ترکیب محتوا با زمینه با حالت exclusion
hue ترکیب محتوا با زمینه با حالت hue
saturation ترکیب محتوا با زمینه با حالت saturation
color ترکیب محتوا با زمینه با حالت color
luminosity ترکیب محتوا با زمینه با حالت luminosity
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

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

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

این ویژگی شبیه به ویژگی background-blend-mode می باشد، ولی ویژگی background-blend-mode برای مخلوط تصویر زمینه با رنگ زمینه می باشد و ویژگی mix-blend-mode برای مخلوط محتوا ( میتونه متن یا تصویر باشه ) با زمینه عنصر پدرش می باشد.

Free-Learn

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