ویژگی mix-blend-mode CSS

تعریف و استفاده

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

لطفاً به:

دستورالعمل‌های CSSویژگی background-blend-mode CSS

مثال

کонтنری با پس‌زمینه قرمز و تصویری که با این کنتainer قرمز ترکیب شده است (تاریک):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

آزمایش کنید

مثال‌های بیشتر TIY را در پایین صفحه پیدا کنید.

قوانین CSS

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

مقدار ویژگی

مقدار توضیحات
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 تنظیم کنید.

جزئیات فنی

مقدار پیش‌فرض: normal
ارث‌بری: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:خصوصیات مرتبط با انیمیشن.
قوانین جاوااسکریپت: object.style.mixBlendMode = "darken"

مثال‌های بیشتر

مثال

نمایش همه مقادیر:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

آزمایش کنید

مثال

برای ایجاد متن پاسخگو و抠‌شده با استفاده از mix-blend-mode:

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

آزمایش کنید

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

تعداد در جدول نشان‌دهنده نسخه اولین مرورگر است که این ویژگی را کاملاً پشتیبانی می‌کند.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0