خصائص نمط الخلط لـ CSS

التعريف والاستخدام

يحدد خاصية mix-blend-mode كيفية مزج محتويات العنصر مع خلفية أقربه.

يرجى الرجوع أيضًا إلى:

دليل CSSخصوصیت background-blend-mode CSS

مثال

مقارنة الحاوية ذات الخلفية الحمراء، والصورة المتلائمة مع هذه الحاوية الحمراء (الظلام):

.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 هذا هو القيمة الافتراضية. قم بتعيين نمط الخلط إلى العادي.
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