CSS میکس بلندریز موڈ نمائش

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

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

لطفاً به:

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

مثال

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

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

آزمایش کنید

مثالويات بیشتری در پایین صفحه پیدا خواهید کرد.

جسیمات نویسندگی 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 برای ایجاد متن cutout/knockout پاسخگو استفاده کنید:

.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