جستجو برای:
  • صفحه اصلی
  • دوره های آموزشی
    • آموزش سئو محتوا جدید 1401
    • آموزش رایگان وردپرس 1401
    • آموزش رایگان HTML و CSS
    • دوره طراحی سایت فرانت اند
    • دوره طراحی سایت با وردپرس
    • دوره جامع برنامه نویسی PHP
  • انجمن سایت آموزی
  • مقالات سایت آموزی
  • تماس با سایت آموزی
  • درباره سایت آموزی
  • 09366806011
  • siteamoozi[at]gmail.com
  • آموزش طراحی سایت
  • آموزش وردپرس
سایت آموزی
  • صفحه اصلی
  • دوره های آموزشی
    • آموزش سئو محتوا جدید 1401
    • آموزش رایگان وردپرس 1401
    • آموزش رایگان HTML و CSS
    • دوره طراحی سایت فرانت اند
    • دوره طراحی سایت با وردپرس
    • دوره جامع برنامه نویسی PHP
  • انجمن سایت آموزی
  • مقالات سایت آموزی
  • تماس با سایت آموزی
  • درباره سایت آموزی
0

ورود و ثبت نام

بلاگ

سایت آموزی > مقالات سایت آموزی > آموزش های طراحی سایت > css > صفت mix-blend-mode در css

صفت mix-blend-mode در css

اسفند 23, 1398
ارسال شده توسط سایت آموزی
css
811 بازدید

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت mix-blend-mode در زبان CSS می پردازیم.

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

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر

معرفی و کاربرد ویژگی mix-blend-mode در زبان طراحی سی اس اس

به کمک خاصیت mix-blend-mode در CSS3 می توانیم مشخص کنیم چگونه محتوای یک عنصر html را با پس زمینه والد مستقیم آن ترکیب شود.

توسط ویژگی mix-blend-mode به راحتی می توان دو عنصر html را در یکدیگر ترکیب نمود. به عنوان مثال می توانیم یک متن را در یک تصویر ، و یا یک تصویر را در یک تصویر دیگر و حتی یک هدر ثابت را با عناصر پشت سر آن در حالت اسکرول ترکیب نماییم.

داده blend-mode در سی اس اس ، فرمولی جهت ترکیب کردن رنگ یا رنگ های یک عنصر با محتوای پشت سرش ارائه می دهد.

به عبارت دیگر داده blend-mode می تواند پیکسل های رنگ عناصر روی هم را بگیرد و جهت نمایش آنها را در همدیگر ترکیب کند و یا اینکه یکی از آنها را برای نمایش انتخاب کند.

در زبان طراحی CSS برای استفاده از داده blend-mode ، دو ویژگی در CSS3 تعریف شد که عبارتند از:

  1. ویژگی background-blend-mode
  2. ویژگی mix-blend-mode

مقادیر صفت کاربردی mix-blend-mode در زبان طراحی سی اس اس

صفت mix-blend-mode که در زبان طراحی CSS3 معرفی شده است، 14 مقدار می پذیرد که عبارتند از:

  1. مقدار normal
  2. مقدار multiply
  3. مقدار screen
  4. مقدار overlay
  5. مقدار darken
  6. مقدار lighten
  7. مقدار color-dodge
  8. مقدار color-burn
  9. مقدار difference
  10. مقدار exclusion
  11. مقدار hue
  12. مقدار saturation
  13. مقدار color
  14. مقدار luminosity

مقدار normal درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برای یک عنصر html برابر با مقدار normal قرار دهیم، درحقیقت می خواهیم هیچگونه ترکیبی بین محتوای عنصر html با والد پشت سرش رخ ندهد.

مقدار normal به عنوان مقدار پیش فرض خصوصیت mix-blend-mode محسوب می شود.

[html] img {mix-blend-mode: normal;} [/html]

تصویر زیر به خوبی حالت عدم آمیختگی عناصر را درون خاصیت mix-blend-mode در حالت normal نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | normal | آموزش طراحی سایت | سایت آموزی

مقدار multiply درون خاصیت mix-blend-mode در زبان css

اگر خاصیت mix-blend-mode را برای یک عنصر html برابر با مقدار multiply قرار دهیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم از ضرب کردن دو پیکسلی که روی هم هستند به دست می آید.

[html] img {mix-blend-mode: multiply;} [/html]

تصویر زیر به خوبی حالت آمیختگی multiply را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | multiply | آموزش طراحی سایت | سایت آموزی

مقدار screen درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برای یک عنصر html برابر با مقدار screen قرار دهیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، از ضرب کردن برعکس مقادیر دو پیکسل روی هم به دست می آید.

صفت mix-blend-mode در css ترکیب عنصر محتوای پشت

[html] img {mix-blend-mode: screen;} [/html]

تصویر زیر به خوبی حالت آمیختگی screen را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | screen | آموزش طراحی سایت | سایت آموزی

مقدار overlay درون خاصیت mix-blend-mode در زبان css

اگر خاصیت mix-blend-mode را برای یک عنصر html برابر با مقدار overlay قرار دهیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، از یک فرمول ترکیبی حاصل از مقادیر multiply و screen به دست می آید. در این روش قسمت های روشن ، روشن تر و قسمت های تاریک ، تاریک تر می شوند.

[html] img {mix-blend-mode: overlay;} [/html]

تصویر زیر به خوبی حالت آمیختگی overlay را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | overlay | آموزش طراحی سایت | سایت آموزی

مقدار darken درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برای یک عنصر html برابر با مقدار darken قرار دهیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، از بین دو پیکسل روی هم ، پیکسل تاریک تر را انتخاب می کند.

[html] img {mix-blend-mode: darken;} [/html]

تصویر زیر به خوبی حالت آمیختگی darken را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | darken | آموزش طراحی سایت | سایت آموزی

مقدار lighten درون خاصیت mix-blend-mode در زبان css

اگر خاصیت mix-blend-mode را برابر با مقدار lighten تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، از بین دو پیکسل روی هم ، پیکسل روشن تر را انتخاب می کند.

[html] img {mix-blend-mode: lighten;} [/html]

تصویر زیر به خوبی حالت آمیختگی lighten را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | lighten | آموزش طراحی سایت | سایت آموزی

مقدار color-dodge درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برابر با مقدار color-dodge تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، لایه رنگی زیرین را روشن تر می کند، تا لایه رنگی رویی آشکارتر نمایش داده شود.

[html] img {mix-blend-mode: color-dodge;} [/html]

تصویر زیر به خوبی حالت آمیختگی lighten را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | color-dodge| آموزش طراحی سایت | سایت آموزی

مقدار color-burn درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برابر با مقدار color-burn تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، لایه رنگی زیرین را تاریک تر می کند، این عمل منجر به افزایش تضاد در نمایش تصویر ترکیبی خواهد شد.

[html] img {mix-blend-mode: color-burn;} [/html]

تصویر زیر به خوبی حالت آمیختگی color-burn را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | color-burn | آموزش طراحی سایت | سایت آموزی

صفت mix-blend-mode در css ترکیب عنصر محتوای پشت

مقدار difference درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برابر با مقدار difference تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، از تقسیم کردن مقادیر دو پیکسل روی هم به دست می آید. و مقداری مثبت است.

[html] img {mix-blend-mode: difference;} [/html]

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر

تصویر زیر به خوبی حالت آمیختگی difference را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | difference | آموزش طراحی سایت | سایت آموزی

مقدار exclusion درون خاصیت mix-blend-mode در زبان css

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

[html] img {mix-blend-mode: exclusion;} [/html]

تصویر زیر به خوبی حالت آمیختگی exclusion را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | exclusion | آموزش طراحی سایت | سایت آموزی

مقدار hue درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برابر با مقدار hue تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، یک رنگ نهایی با استفاده از hue رنگ مورد نظر و saturation و luminance تصویر پس زمینه به وجود می آورد.

[html] img {mix-blend-mode: hue;} [/html]

تصویر زیر به خوبی حالت آمیختگی hue را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | hue | آموزش طراحی سایت | سایت آموزی

مقدار saturation درون خاصیت mix-blend-mode در زبان css

اگر خاصیت mix-blend-mode را برابر با مقدار saturation تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، یک رنگ نهایی با استفاده از saturation رنگ مورد نظر و hue و luminance تصویر پس زمینه به وجود می آورد.

[html] img {mix-blend-mode: saturation;} [/html]

تصویر زیر به خوبی حالت آمیختگی saturation را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | saturation | آموزش طراحی سایت | سایت آموزی

مقدار color درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برابر با مقدار color تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، یک رنگ نهایی با استفاده از saturation و hue رنگ مورد نظر و luminance تصویر پس زمینه به وجود می آورد.

[html] img {mix-blend-mode: ;} [/html]

تصویر زیر به خوبی حالت آمیختگی color را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | color | آموزش طراحی سایت | سایت آموزی

مقدار luminosity درون خاصیت mix-blend-mode در زبان سی اس اس

اگر خاصیت mix-blend-mode را برابر با مقدار luminosity تعریف کنیم، برای ترکیب محتوای عنصر در پس زمینه والد مستقیم آن که در اینجا رنگ نارنجی در نظر گرفته ایم، پیکسل نهایی برای ترسیم ، یک رنگ نهایی با استفاده از luminance رنگ مورد نظر و hue و saturation  تصویر پس زمینه به وجود می آورد.

[html] img {mix-blend-mode: luminosity;} [/html]

تصویر زیر به خوبی حالت آمیختگی luminosity را درون خاصیت mix-blend-mode نشان می دهد:

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر | luminosity | آموزش طراحی سایت | سایت آموزی

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر

بررسی خاصیت mix-blend-mode از نظر نسخه زبان طراحی سی اس اس

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

بررسی ساختاری خصوصیت mix-blend-mode در زبان طراحی سی اس اس

عناوین ساختاری خاصیت mix-blend-mode

وضعیت ساختاری خاصیت mix-blend-mode

مقدار پیش فرض

normal

قابلیت توارث

ندارد

قابلیت تحرک

ندارد

ورژن css صفت

CSS3

سینتکس صفت در جاوا اسکریپت

"object.style.mixBlendMode="darken

پشتیبانی مرورگرهای اینترنتی از خاصیت mix-blend-mode در زبان طراحی سی اس اس
خاصیت css chromeinternet-explorerfirefoxsafariopera
mix-blend-mode 41.0 عدم پشتیبانی 32.0 8.0 35.0

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر – اختصاصی سایت آموزی

محتوا نمایش
1 معرفی و کاربرد ویژگی mix-blend-mode در زبان طراحی سی اس اس
2 مقادیر صفت کاربردی mix-blend-mode در زبان طراحی سی اس اس
3 مقدار normal درون خاصیت mix-blend-mode در زبان سی اس اس
4 مقدار multiply درون خاصیت mix-blend-mode در زبان css
5 مقدار screen درون خاصیت mix-blend-mode در زبان سی اس اس
6 صفت mix-blend-mode در css ترکیب عنصر محتوای پشت
7 مقدار overlay درون خاصیت mix-blend-mode در زبان css
8 مقدار darken درون خاصیت mix-blend-mode در زبان سی اس اس
8.1 مقدار lighten درون خاصیت mix-blend-mode در زبان css
8.2 مقدار color-dodge درون خاصیت mix-blend-mode در زبان سی اس اس
8.3 مقدار color-burn درون خاصیت mix-blend-mode در زبان سی اس اس
8.4 صفت mix-blend-mode در css ترکیب عنصر محتوای پشت
8.4.1 مقدار difference درون خاصیت mix-blend-mode در زبان سی اس اس
9 صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر
9.1 مقدار exclusion درون خاصیت mix-blend-mode در زبان css
9.2 مقدار hue درون خاصیت mix-blend-mode در زبان سی اس اس
9.3 مقدار saturation درون خاصیت mix-blend-mode در زبان css
9.4 مقدار color درون خاصیت mix-blend-mode در زبان سی اس اس
9.5 مقدار luminosity درون خاصیت mix-blend-mode در زبان سی اس اس
10 صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر
10.1 بررسی خاصیت mix-blend-mode از نظر نسخه زبان طراحی سی اس اس
10.1.1 بررسی ساختاری خصوصیت mix-blend-mode در زبان طراحی سی اس اس
10.1.2 پشتیبانی مرورگرهای اینترنتی از خاصیت mix-blend-mode در زبان طراحی سی اس اس
10.2 پیوندهای مهم و کاربردی
10.3 صفت mix-blend-mode در css ترکیب عنصر با محتوای پشت سر – اختصاصی سایت آموزی
برچسب ها: آموزش کاربردی طراحی سایتآموزش های CSS3سی اس اسطراحی سایت کاربردیویژگی های css
درباره سایت آموزی

علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب

نوشته های بیشتر از سایت آموزی
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت all در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت align-items در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

خاصیت align-self در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت animation-delay در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت animation-play-state در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت animation-duration در زبان سی اس اس

قدیمی تر زبان برنامه نویسی جاوا اسکریپت
جدیدتر صفت transform در css

دیدگاهتان را بنویسید لغو پاسخ

20 − 13 =

دوره های آموزشی
دوره طراحی سایت فروشگاهی دوره طراحی سایت فروشگاهی
دوره طراحی سایت فرانت اند آموزش طراحی سایت فرانت اند
لوگوی معتبر پرداخت بانک اینترنتی پی لاین
لوگوی معتبر نماد اعتماد الکترونیک
لوگوی معتبر ساماندهی رسانه های دیجیتال
logo-samandehi
آخرین مقالات سایت آموزی
  • زبان های برنامه نویسی طراحی سایت
  • آموزش نصب وردپرس در لوکال هاست
  • رفع ارور Inline small CSS در جی تی متریکس
  • ویژگی onbeforeprint در زبان اچ تی ام ال
  • ویژگی name در زبان اچ تی ام ال
آخرین دیدگاه‌ها
  • مریم در خاصیت background-color در css
  • ابوالفضل در تفاوت شناسه و کلاس در اچ تی ام ال و سی اس اس
  • سایت آموزی در آموزش رایگان طراحی سایت شرکتی با وردپرس ( جدید 1401 )
  • hadi sobati در آموزش رایگان طراحی سایت شرکتی با وردپرس ( جدید 1401 )
  • سایت آموزی در آموزش HTML و CSS رایگان ، پروژه محور و کاربردی ( جدید 1401 )
تمامی حقوق برای سایت آموزی محفوظ می باشد.

ورود

چهارده − چهار =

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت