أوضاع المزج و mix-blend-mode

ما هي أوضاع المزج؟

تحدد أوضاع المزج كيف تتفاعل ألوان طبقة مع ألوان الطبقات تحتها. إذا كنت قد استخدمت فوتوشوب أو إليستريتور أو أي برنامج تحرير صور، فأنت بالفعل على دراية بالمفهوم -- أوضاع المزج مثل Multiply وScreen وOverlay هي أساسيات التصميم الجرافيكي. يجلب CSS هذه القوة نفسها إلى الويب بخاصيتين: mix-blend-mode وbackground-blend-mode.

في جوهرها، تعمل أوضاع المزج بأخذ قيم ألوان طبقتين متداخلتين وتطبيق صيغة رياضية لإنتاج لون جديد. الطبقة العلوية تسمى المصدر، والطبقة السفلية تسمى الوجهة (أو الخلفية). تستخدم أوضاع المزج المختلفة صيغا مختلفة، ولهذا تنتج نتائج بصرية مختلفة بشكل كبير. بعضها يعتّم، وبعضها يسطّع، وبعضها يزيد التباين، وبعضها ينشئ مجموعات ألوان غير متوقعة تماما.

أوضاع المزج ليست فقط للصور. يمكنك تطبيقها على النصوص والأشكال والخلفيات والتدرجات وأي عنصر HTML. هذا يجعلها متعددة الاستخدامات بشكل لا يصدق لإنشاء تأثيرات بصرية كانت تتطلب خلاف ذلك صورا معالجة مسبقا من أداة تصميم.

/* mix-blend-mode: يمزج عنصرا مع المحتوى خلفه */
.element {
    mix-blend-mode: multiply;
}

/* background-blend-mode: يمزج طبقات خلفية العنصر نفسه */
.element {
    background-image: url("photo.jpg");
    background-color: #3498db;
    background-blend-mode: overlay;
}

/* إعادة التعيين إلى الافتراضي (بدون مزج) */
.element {
    mix-blend-mode: normal;
    background-blend-mode: normal;
}

mix-blend-mode: مزج العناصر مع خلفيتها

تتحكم خاصية mix-blend-mode في كيفية مزج المحتوى البصري لعنصر مع المحتوى مباشرة خلفه في ترتيب التصيير. هذا يعني أن ألوان العنصر يتم دمجها رياضيا مع ما هو مرئي تحته -- سواء كان خلفية عنصر أب، أو عناصر شقيقة، أو أي محتوى آخر في سياق التكديس.

<!-- هيكل HTML -->
<div class="backdrop" style="background: #e74c3c;">
    <div class="blend-element" style="background: #3498db;">
        أنا أمتزج مع الأحمر خلفي
    </div>
</div>

/* العنصر الأزرق يمتزج مع الخلفية الحمراء */
.blend-element {
    mix-blend-mode: multiply;
}

/* mix-blend-mode يعمل على أي عنصر، بما في ذلك النص */
.blended-heading {
    color: #ff6600;
    mix-blend-mode: difference;
    font-size: 4rem;
    font-weight: bold;
}

/* الصور تمتزج مع الخلفية */
.blended-image {
    mix-blend-mode: screen;
}

background-blend-mode: مزج طبقات الخلفية

تتحكم خاصية background-blend-mode في كيفية مزج طبقات خلفية العنصر نفسه مع بعضها البعض. يسمح CSS بعدة صور خلفية ولون خلفية على عنصر واحد. تحدد خاصية background-blend-mode كيفية تركيب هذه الطبقات معا. كل طبقة خلفية تمتزج مع الطبقة تحتها، مع لون الخلفية في أسفل المكدس.

/* مزج صورة خلفية مع لون خلفية */
.color-tinted-image {
    background-image: url("photo.jpg");
    background-color: #3498db;
    background-blend-mode: multiply;
    background-size: cover;
}

/* مزج صورتي خلفية معا */
.dual-image-blend {
    background-image:
        url("texture.png"),
        url("photo.jpg");
    background-blend-mode: overlay, normal;
    background-size: cover;
}

/* مزج تدرج مع صورة */
.gradient-overlay {
    background-image:
        linear-gradient(135deg, #667eea, #764ba2),
        url("photo.jpg");
    background-blend-mode: overlay;
    background-size: cover;
}

/* أوضاع مزج متعددة لطبقات متعددة */
.complex-blend {
    background-image:
        url("pattern.svg"),
        linear-gradient(to right, #e74c3c, #3498db),
        url("photo.jpg");
    background-blend-mode: screen, multiply;
    /* القيمة الأولى: النمط يمتزج مع التدرج
       القيمة الثانية: التدرج يمتزج مع الصورة */
    background-size: 100px 100px, cover, cover;
}

الوضع العادي

وضع المزج normal هو الافتراضي. لا يقوم بأي مزج -- طبقة المصدر تغطي ببساطة طبقة الوجهة بالكامل (مع احترام الشفافية). هذه هي الطريقة التي تُصيَّر بها العناصر عادة في CSS. نادرا ما تعيّن هذا صراحة إلا إذا كنت تتجاوز وضع مزج تم تعيينه في مكان آخر.

/* السلوك الافتراضي -- بدون مزج */
.element {
    mix-blend-mode: normal;
}

/* مفيد لإعادة تعيين وضع المزج على العناصر الفرعية */
.parent {
    mix-blend-mode: multiply;
}

.parent .no-blend-child {
    mix-blend-mode: normal; /* تجاوز مزج العنصر الأب */
}

أوضاع التعتيم: multiply، darken، color-burn

تنتج مجموعة أوضاع التعتيم نتائج أغمق من طبقة المصدر أو الوجهة. هذه الأوضاع مفيدة لإنشاء الظلال وإضافة العمق وتراكب القوام على الصور وإنتاج مجموعات ألوان غنية وداكنة.

multiply

يضرب وضع المزج multiply قيم ألوان طبقتي المصدر والوجهة. النتيجة دائما أغمق (أو مساوية) لأغمق الطبقتين. الأبيض في طبقة المصدر يصبح شفافا (لأن الضرب في 1 يترك الوجهة بدون تغيير)، بينما الأسود يبقى أسود (الضرب في 0 يعطي دائما 0). فكر في الأمر كتراكم قطعتين من الزجاج الملون -- الضوء يمر عبر كليهما، مما يجعل النتيجة أغمق.

/* Multiply يجعل كل شيء أغمق */
.multiply-element {
    mix-blend-mode: multiply;
}

/* استخدام كلاسيكي: تلوين صورة بلون */
.tinted-image-container {
    position: relative;
    background-color: #2c3e50; /* صبغة أزرق-رمادي داكن */
}

.tinted-image-container img {
    display: block;
    width: 100%;
    mix-blend-mode: multiply;
}

/* مزج الخلفية: غسل لوني فوق صورة */
.blue-tinted-hero {
    background-image: url("hero.jpg");
    background-color: #2980b9;
    background-blend-mode: multiply;
    background-size: cover;
    color: white;
}

/* Multiply ممتاز لتراكب القوام الداكنة */
.textured-background {
    background-image:
        url("grunge-texture.png"),
        url("photo.jpg");
    background-blend-mode: multiply;
    background-size: cover;
}

darken

يقارن وضع المزج darken كل قناة لون للمصدر والوجهة ويحتفظ بالقيمة الأغمق. على عكس multiply الذي يعتّم النتيجة دائما، darken ببساطة يختار القيمة الأدنى من كل قناة. النتيجة هي أن المناطق التي يكون فيها المصدر أغمق من الوجهة فقط هي التي ستتأثر.

/* Darken: يحتفظ بالأغمق من الطبقتين لكل قناة */
.darken-element {
    mix-blend-mode: darken;
}

/* استخدم darken لتراكب عناصر داكنة مع الحفاظ على المناطق الفاتحة */
.dark-overlay {
    background-image:
        url("dark-vignette.png"),
        url("photo.jpg");
    background-blend-mode: darken;
    background-size: cover;
}

/* تعتيم النص مقابل خلفية ملونة */
.darken-text {
    color: #333;
    mix-blend-mode: darken;
    font-weight: bold;
}

color-burn

يعتّم وضع المزج color-burn لون الوجهة ليعكس لون المصدر عن طريق زيادة التباين. ينتج نتيجة أكثر كثافة وتشبعا بكثير من multiply. الأسود في المصدر ينتج أسود في النتيجة، والأبيض في المصدر يترك الوجهة بدون تغيير. يخلق color-burn تأثيرات ألوان غنية وعميقة مع تباين عالٍ.

/* Color-burn: تعتيم مكثف مع تشبع عالٍ */
.color-burn-element {
    mix-blend-mode: color-burn;
}

/* تراكب لوني درامي */
.dramatic-hero {
    background-image: url("photo.jpg");
    background-color: #c0392b;
    background-blend-mode: color-burn;
    background-size: cover;
}

/* تكثيف القوام */
.intense-texture {
    background-image:
        url("paper-texture.jpg"),
        url("content-image.jpg");
    background-blend-mode: color-burn;
    background-size: cover;
}

أوضاع التفتيح: screen، lighten، color-dodge

تنتج مجموعة أوضاع التفتيح نتائج أفتح من طبقة المصدر أو الوجهة. إنها المعكوس الرياضي لأوضاع التعتيم. هذه الأوضاع مثالية لإنشاء تأثيرات التوهج وتسريبات الضوء والتراكبات المشرقة.

screen

وضع المزج screen هو معكوس multiply. يضرب معكوس ألوان المصدر والوجهة، منتجا نتيجة أفتح دائما (أو مساوية) لأفتح الطبقتين. الأسود في المصدر يصبح شفافا (لأن المسح بالأسود ليس له تأثير)، بينما الأبيض ينتج أبيض. فكر في الأمر كعرض صورتين على نفس الشاشة -- النتيجة دائما أسطع.

/* Screen يجعل كل شيء أفتح */
.screen-element {
    mix-blend-mode: screen;
}

/* استخدام كلاسيكي: تأثير تسرب ضوء أو توهج */
.light-leak {
    position: relative;
}

.light-leak::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%,
        rgba(255, 200, 50, 0.8),
        transparent 60%);
    mix-blend-mode: screen;
}

/* إزالة الخلفيات السوداء من الصور */
.remove-black-bg {
    mix-blend-mode: screen;
    /* أي مناطق سوداء تصبح شفافة */
    /* ممتاز لتأثيرات النار والشرر والضوء على أسود */
}

/* غسل لوني مشرق */
.bright-wash {
    background-image: url("photo.jpg");
    background-color: #f39c12;
    background-blend-mode: screen;
    background-size: cover;
}

lighten

يقارن وضع المزج lighten كل قناة لون للمصدر والوجهة ويحتفظ بالقيمة الأفتح. إنه معكوس darken. فقط المناطق التي يكون فيها المصدر أفتح من الوجهة ستُظهر لون المصدر.

/* Lighten: يحتفظ بالأفتح من الطبقتين لكل قناة */
.lighten-element {
    mix-blend-mode: lighten;
}

/* استخدم لإضافة إبرازات مشرقة دون التأثير على المناطق الداكنة */
.highlight-overlay {
    background-image:
        url("light-flare.png"),
        url("photo.jpg");
    background-blend-mode: lighten;
    background-size: cover;
}

/* تأثير نص مفتّح */
.lighten-heading {
    color: #ecf0f1;
    mix-blend-mode: lighten;
}

color-dodge

يسطّع وضع المزج color-dodge لون الوجهة ليعكس لون المصدر عن طريق تقليل التباين. ينتج نتائج مشرقة جدا ومبيضة، خاصة في المناطق الفاتحة. الأسود في المصدر ليس له تأثير، بينما قيم المصدر الأفتح تنتج نتائج أكثر سطوعا بشكل متزايد. color-dodge ممتاز لإنشاء تأثيرات توهج وإبراز مكثفة.

/* Color-dodge: تأثير إسطاع مكثف */
.color-dodge-element {
    mix-blend-mode: color-dodge;
}

/* إنشاء تأثير ضوء متوهج */
.glow-effect {
    background-image:
        radial-gradient(circle, rgba(255, 255, 200, 0.6), transparent 60%),
        url("dark-photo.jpg");
    background-blend-mode: color-dodge;
    background-size: cover;
}

/* تراكب إبراز مكثف */
.spotlight {
    position: relative;
}

.spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%,
        rgba(255, 255, 255, 0.4),
        transparent 50%);
    mix-blend-mode: color-dodge;
}

أوضاع التباين: overlay، soft-light، hard-light

تزيد مجموعة أوضاع التباين من التباين الكلي عن طريق دمج سلوكي التعتيم والتفتيح. المناطق الفاتحة تصبح أفتح والمناطق الداكنة تصبح أغمق، منتجة نتيجة بقوة بصرية معززة. هذه من بين أكثر أوضاع المزج استخداما في كل من التصميم و CSS.

overlay

يجمع وضع المزج overlay بين multiply وscreen. يطبق multiply على المناطق الداكنة وscreen على المناطق الفاتحة من الوجهة. تحافظ النتيجة على الإبرازات والظلال للوجهة مع دمج ألوان المصدر. يعد overlay من أكثر أوضاع المزج تنوعا وشعبية لأنه يعزز التباين دون أن يطغى تماما على المحتوى الأساسي.

/* Overlay: يعزز التباين، يجمع multiply + screen */
.overlay-element {
    mix-blend-mode: overlay;
}

/* استخدام كلاسيكي: تدريج لوني لصورة */
.warm-graded {
    background-image: url("photo.jpg");
    background-color: #e67e22;
    background-blend-mode: overlay;
    background-size: cover;
}

/* إضافة قوام إلى خلفية صلبة */
.textured-panel {
    background-image:
        url("noise-texture.png"),
        linear-gradient(135deg, #2c3e50, #3498db);
    background-blend-mode: overlay;
    background-size: 200px 200px, cover;
}

/* تراكب نص على خلفيات ديناميكية */
.overlay-heading {
    color: white;
    mix-blend-mode: overlay;
    font-size: 5rem;
    font-weight: 900;
}

soft-light

وضع المزج soft-light هو نسخة أكثر لطفا من overlay. يطبق تأثير تعتيم أو تفتيح خفيف بناء على لون المصدر. إذا كان المصدر أفتح من 50% رمادي، يتم تفتيح النتيجة. إذا كان المصدر أغمق من 50% رمادي، يتم تعتيم النتيجة. التأثير أكثر نعومة وخفة بكثير من overlay، مما يجعله مثاليا لتعديلات الألوان الخفيفة والتحسينات ذات المظهر الطبيعي.

/* Soft-light: تعزيز تباين خفيف */
.soft-light-element {
    mix-blend-mode: soft-light;
}

/* غسل لوني لطيف -- أكثر خفة من overlay */
.subtle-tint {
    background-image: url("photo.jpg");
    background-color: #9b59b6;
    background-blend-mode: soft-light;
    background-size: cover;
}

/* تراكب قوام خفيف */
.subtle-texture {
    background-image:
        url("light-grain.png"),
        url("clean-photo.jpg");
    background-blend-mode: soft-light;
    background-size: 300px 300px, cover;
}

/* تأثير إبراز ناعم */
.soft-highlight {
    position: relative;
}

.soft-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top,
        rgba(255, 255, 255, 0.5),
        transparent 70%);
    mix-blend-mode: soft-light;
}

hard-light

وضع المزج hard-light يشبه overlay لكن مع تبديل طبقتي المصدر والوجهة. إذا كان المصدر أفتح من 50% رمادي، يطبق screen على الوجهة. إذا كان المصدر أغمق من 50% رمادي، يطبق multiply. النتيجة هي تأثير تباين أقسى وأكثر كثافة من overlay. hard-light مفيد عندما تريد أن تهيمن طبقة المصدر على المزج.

/* Hard-light: تباين مكثف -- المصدر يهيمن */
.hard-light-element {
    mix-blend-mode: hard-light;
}

/* تدريج لوني مكثف */
.intense-grade {
    background-image: url("photo.jpg");
    background-color: #e74c3c;
    background-blend-mode: hard-light;
    background-size: cover;
}

/* تأثير نص درامي */
.dramatic-text {
    color: #2c3e50;
    mix-blend-mode: hard-light;
    font-size: 6rem;
    font-weight: 900;
}

الأوضاع المقارنة: difference، exclusion

تنتج أوضاع المزج المقارنة نتائج بناء على الفرق بين ألوان المصدر والوجهة. تخلق تأثيرات غير عادية، غالبا سيكاديلية، مفيدة للتراكيب الفنية واكتشاف الفروق بين الصور وإنشاء تأثيرات بصرية فريدة.

difference

يطرح وضع المزج difference اللون الأغمق من اللون الأفتح لكل قناة. إذا كانت الطبقتان متطابقتين، تكون النتيجة سوداء. إذا كانت إحدى الطبقتين بيضاء، يتم عكس الأخرى. إذا كانت إحدى الطبقتين سوداء، تكون النتيجة الطبقة الأخرى بدون تغيير. ينشئ difference نتائج عالية التباين وملونة يمكن أن تبدو درامية وملفتة للنظر.

/* Difference: يطرح الألوان، ينشئ تباينا عاليا */
.difference-element {
    mix-blend-mode: difference;
}

/* نص ديناميكي قابل للقراءة دائما على أي خلفية */
.adaptive-text {
    color: white;
    mix-blend-mode: difference;
    /* أبيض + difference = ألوان خلفية معكوسة */
    /* ينشئ دائما تباينا مقابل أي خلفية */
}

/* تأثير ألوان سيكاديلي */
.psychedelic {
    background-image: url("photo.jpg");
    background-color: #8e44ad;
    background-blend-mode: difference;
    background-size: cover;
}

/* كشف الفروق بين العناصر المتداخلة */
.comparison-overlay {
    position: absolute;
    inset: 0;
    mix-blend-mode: difference;
    /* المناطق المتطابقة ستظهر سوداء */
    /* المناطق المختلفة ستظهر كبكسلات ملونة */
}

exclusion

وضع المزج exclusion مشابه لـ difference لكن ينتج نتيجة أقل تباينا. حيث ينشئ difference انعكاسات ألوان صارخة وعالية التباين، ينشئ exclusion نتائج أكثر نعومة وكتما. المناطق الرمادية في أي من الطبقتين تنتج نتيجة رمادية متوسطة، مما يجعل exclusion أقل دراماتيكية وأكثر قابلية للاستخدام لتأثيرات فنية خفيفة.

/* Exclusion: نسخة أكثر نعومة من difference */
.exclusion-element {
    mix-blend-mode: exclusion;
}

/* تأثير عكس خفيف */
.subtle-inversion {
    background-image: url("photo.jpg");
    background-color: #95a5a6;
    background-blend-mode: exclusion;
    background-size: cover;
}

/* Exclusion مع الرمادي ينتج درجات مكتومة مثيرة */
.muted-blend {
    background-image:
        linear-gradient(45deg, #666, #999),
        url("photo.jpg");
    background-blend-mode: exclusion;
    background-size: cover;
}

أوضاع المكونات: hue، saturation، color، luminosity

تفصل أوضاع مزج المكونات اللون إلى مكونات HSL (درجة اللون، التشبع، الإضاءة) وتأخذ بشكل انتقائي مكونات من طبقة المصدر أو الوجهة. تمنحك هذه الأوضاع تحكما دقيقا في معالجة الألوان دون التأثير على جوانب أخرى من الصورة.

hue

يأخذ وضع المزج hue درجة اللون من المصدر ويدمجها مع تشبع وإضاءة الوجهة. هذا يعني أنه يمكنك تغيير لون صورة مع الحفاظ على قيمها الفاتحة/الداكنة وكثافة ألوانها.

/* Hue: يأخذ اللون من المصدر، الإضاءة + التشبع من الوجهة */
.hue-blend {
    mix-blend-mode: hue;
}

/* إعادة تلوين صورة مع الحفاظ على درجاتها */
.recolored-image {
    background-image: url("photo.jpg");
    background-color: #e74c3c; /* سيتم تطبيق درجة اللون الأحمر */
    background-blend-mode: hue;
    background-size: cover;
}

/* إنشاء تنويعات لونية لصورة منتج */
.product-red    { background-color: #e74c3c; background-blend-mode: hue; }
.product-blue   { background-color: #3498db; background-blend-mode: hue; }
.product-green  { background-color: #2ecc71; background-blend-mode: hue; }
.product-purple { background-color: #9b59b6; background-blend-mode: hue; }

saturation

يأخذ وضع المزج saturation التشبع من المصدر ويدمجه مع درجة اللون والإضاءة من الوجهة. هذا يتيح لك التحكم في مدى حيوية أو كتم الألوان دون تغيير ماهية تلك الألوان أو مدى فتح/غمق الصورة.

/* Saturation: يأخذ التشبع من المصدر، درجة اللون + الإضاءة من الوجهة */
.saturation-blend {
    mix-blend-mode: saturation;
}

/* إزالة تشبع صورة باستخدام تراكب رمادي */
.desaturated {
    background-image: url("photo.jpg");
    background-color: #808080; /* رمادي = بدون تشبع */
    background-blend-mode: saturation;
    background-size: cover;
}

/* تعزيز التشبع بلون حي */
.super-saturated {
    background-image: url("photo.jpg");
    background-color: hsl(0, 100%, 50%); /* أقصى تشبع */
    background-blend-mode: saturation;
    background-size: cover;
}

color

يأخذ وضع المزج color درجة اللون والتشبع من المصدر ويدمجهما مع إضاءة الوجهة. هذا أحد أكثر أوضاع المكونات فائدة لأنه يتيح لك إعادة تلوين صورة بالكامل مع الحفاظ على جميع تفاصيلها الفاتحة والداكنة. يُستخدم عادة لتلوين الصور الرمادية أو إنشاء مخططات ألوان أحادية.

/* Color: يأخذ درجة اللون + التشبع من المصدر، الإضاءة من الوجهة */
.color-blend {
    mix-blend-mode: color;
}

/* تلوين أحادي لصورة */
.monochrome-blue {
    background-image: url("photo.jpg");
    background-color: #2980b9;
    background-blend-mode: color;
    background-size: cover;
}

/* تلوين صورة رمادية */
.colorized {
    position: relative;
}

.colorized img {
    filter: grayscale(1); /* جعل الصورة رمادية أولا */
}

.colorized::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #e74c3c;
    mix-blend-mode: color;
    /* يطبق درجة اللون/التشبع الأحمر على الصورة الرمادية */
}

/* تأثير شبيه بالثنائي باستخدام مزج color */
.warm-mono {
    background-image: url("photo.jpg");
    background-color: #d35400;
    background-blend-mode: color;
    background-size: cover;
}

luminosity

وضع المزج luminosity هو معكوس color. يأخذ الإضاءة من المصدر ويدمجها مع درجة اللون والتشبع من الوجهة. هذا يعني أن القيم الفاتحة/الداكنة تأتي من الطبقة العلوية بينما الألوان تأتي من الطبقة السفلية. luminosity مفيد عندما تريد الحفاظ على لوحة ألوان محددة مع تطبيق النطاق اللوني لصورة أخرى.

/* Luminosity: يأخذ الإضاءة من المصدر، اللون من الوجهة */
.luminosity-blend {
    mix-blend-mode: luminosity;
}

/* تطبيق النطاق اللوني لصورة على خلفية ملونة */
.luminosity-effect {
    background-image: url("photo.jpg");
    background-color: #2ecc71;
    background-blend-mode: luminosity;
    background-size: cover;
    /* النتيجة: صورة بدرجة خضراء تستخدم قيم الفاتح/الغامق للصورة */
}

/* الحفاظ على اللون مع تغيير أنماط السطوع */
.brightness-texture {
    background-image:
        url("noise-pattern.png"),
        linear-gradient(to right, #e74c3c, #3498db);
    background-blend-mode: luminosity;
    background-size: 200px 200px, cover;
}

isolation: isolate -- التحكم في نطاق المزج

افتراضيا، يمزج mix-blend-mode عنصرا مع كل شيء خلفه، على طول سياق التكديس بالكامل. تسمح لك خاصية isolation بإنشاء سياق تكديس جديد يحد من نطاق المزج. عندما تعيّن isolation: isolate على عنصر أب، فإن أوضاع مزج أبنائه ستمتزج فقط مع المحتوى داخل ذلك الأب، وليس مع المحتوى خلف الأب.

/* بدون isolation: العنصر يمتزج مع كل شيء خلفه */
.background {
    background: url("complex-bg.jpg");
}

.container {
    background: white;
}

.container .blended {
    mix-blend-mode: multiply;
    /* يمتزج مع .container وأيضا .background خلفه */
}

/* مع isolation: العنصر يمتزج فقط داخل عنصره الأب */
.container-isolated {
    background: white;
    isolation: isolate; /* ينشئ سياق تكديس جديد */
}

.container-isolated .blended {
    mix-blend-mode: multiply;
    /* يمتزج فقط مع خلفية .container-isolated البيضاء */
    /* لا يمتزج مع .background خلفه */
}

/* استخدام شائع: منع المزج غير المرغوب مع خلفية الصفحة */
.card {
    isolation: isolate;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.card .blend-element {
    mix-blend-mode: screen;
    /* يمتزج فقط داخل البطاقة، وليس الصفحة */
}

تأثيرات نص إبداعية مع أوضاع المزج

تفتح أوضاع المزج عالما من الإمكانيات الإبداعية لتنسيق النص. يمكنك إنشاء نص يكشف الصور، ونص يتكيف مع أي خلفية، وتأثيرات النص المقطوع، والمزيد -- كل ذلك بدون استخدام صور أو canvas.

/* نص يكشف صورة الخلفية */
.image-reveal-text {
    position: relative;
    background: url("landscape.jpg") center/cover;
}

.image-reveal-text h1 {
    color: white;
    mix-blend-mode: screen;
    font-size: 8rem;
    font-weight: 900;
    background: black;
    /* نص أبيض + وضع screen على خلفية سوداء = النص يكشف الصورة */
}

/* نص قابل للقراءة دائما على أي خلفية */
.adaptive-contrast-text {
    color: white;
    mix-blend-mode: difference;
    font-weight: bold;
    /* ينشئ دائما تباينا عاليا مقابل أي لون خلفية */
}

/* نص بتدرج مع وضع مزج */
.gradient-blend-text {
    position: relative;
    color: #333;
}

.gradient-blend-text::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #e74c3c, #3498db, #2ecc71);
    mix-blend-mode: color;
    pointer-events: none;
}

/* تأثير نص بقوام */
.textured-text {
    position: relative;
    font-size: 6rem;
    font-weight: 900;
    color: white;
}

.textured-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("grunge-texture.jpg") center/cover;
    mix-blend-mode: multiply;
    pointer-events: none;
}

إنشاء صور ثنائية اللون

الثنائي اللون هو تأثير تصميم شائع حيث يتم تصيير صورة باستخدام لونين فقط -- عادة لون داكن للظلال ولون مشرق للإبرازات. يُستخدم هذا التأثير على نطاق واسع في تصميم الويب الحديث للصور الرئيسية وأقسام الميزات والعلامة التجارية. تجعل أوضاع مزج CSS من الممكن إنشاء تأثيرات ثنائية اللون بدون أي برنامج تحرير صور.

/* الطريقة 1: استخدام background-blend-mode مع تدرج */
.duotone-v1 {
    background-image: url("photo.jpg");
    background-color: #2c3e50;
    background-blend-mode: luminosity;
    background-size: cover;
    position: relative;
}

.duotone-v1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #e74c3c, #f39c12);
    mix-blend-mode: color;
}

/* الطريقة 2: ثنائي اللون أبسط باستخدام طبقات multiply + screen */
.duotone-v2 {
    position: relative;
    overflow: hidden;
}

.duotone-v2 img {
    display: block;
    width: 100%;
    filter: grayscale(1) contrast(1.2);
}

.duotone-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0c0c5e, #e91e63);
    mix-blend-mode: color;
}

/* الطريقة 3: نهج خلفية خالص */
.duotone-v3 {
    background:
        linear-gradient(#7b2ff7, #ff2975),
        url("photo.jpg") center/cover;
    background-blend-mode: color;
}

/* إعدادات مسبقة ثنائية اللون */
.duotone-ocean {
    background: linear-gradient(#004e92, #00d2ff), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

.duotone-sunset {
    background: linear-gradient(#c33764, #f8b500), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

.duotone-forest {
    background: linear-gradient(#134e5e, #71b280), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

.duotone-neon {
    background: linear-gradient(#12c2e9, #f64f59), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

أمثلة عملية

دعنا نستكشف عدة تطبيقات واقعية لأوضاع المزج يمكنك استخدامها مباشرة في مشاريعك.

تراكب صورة مع نص

/* قسم رئيسي مع تراكب لوني ونص ممزوج */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: url("hero-photo.jpg") center/cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(44, 62, 80, 0.9),
        rgba(52, 152, 219, 0.7));
    mix-blend-mode: multiply;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 900;
    mix-blend-mode: overlay;
    /* مزج خفيف مع التراكب خلفه */
}

بطاقة تفاعلية مع تأثيرات مزج

.blend-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

.blend-card img {
    display: block;
    width: 100%;
    transition: filter 0.4s ease;
}

.blend-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.blend-card:hover img {
    filter: grayscale(1);
}

.blend-card:hover::after {
    opacity: 1;
}

.blend-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    color: white;
    z-index: 1;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.blend-card:hover .blend-card-title {
    transform: translateY(0);
}

خلفيات بقوام

/* قوام ضوضاء على تدرج */
.noisy-gradient {
    background-image:
        url("noise.png"),
        linear-gradient(135deg, #2c3e50, #3498db);
    background-blend-mode: overlay;
    background-size: 200px 200px, cover;
}

/* قوام ورقي على سطح ملون */
.paper-surface {
    background-image:
        url("paper-texture.jpg"),
        linear-gradient(to bottom, #f9f3e8, #e8dcc8);
    background-blend-mode: multiply;
    background-size: cover;
}

/* نمط نقاط نصفية */
.halftone-bg {
    background-image:
        radial-gradient(circle, #000 1px, transparent 1px),
        linear-gradient(135deg, #e74c3c, #3498db);
    background-size: 8px 8px, cover;
    background-blend-mode: screen;
}

/* نمط متقاطع */
.crosshatch {
    background-image:
        repeating-linear-gradient(45deg,
            transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 6px),
        repeating-linear-gradient(-45deg,
            transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 6px),
        linear-gradient(to right, #3498db, #2ecc71);
    background-blend-mode: multiply, multiply, normal;
}

سمات ألوان ديناميكية

/* استخدام خصائص CSS المخصصة مع أوضاع المزج للسمات */
:root {
    --theme-color: #3498db;
    --theme-blend: overlay;
}

.themed-hero {
    background-image: url("hero.jpg");
    background-color: var(--theme-color);
    background-blend-mode: var(--theme-blend);
    background-size: cover;
}

/* تبديل السمات بتغيير الخصائص المخصصة */
.theme-warm {
    --theme-color: #e67e22;
    --theme-blend: soft-light;
}

.theme-cool {
    --theme-color: #2980b9;
    --theme-blend: overlay;
}

.theme-dramatic {
    --theme-color: #c0392b;
    --theme-blend: color-burn;
}

.theme-muted {
    --theme-color: #7f8c8d;
    --theme-blend: saturation;
}

دعم المتصفحات والحلول البديلة

تتمتع أوضاع المزج بدعم جيد في جميع المتصفحات الحديثة. ومع ذلك، عند استهداف متصفحات قديمة أو توفير تجربة متدهورة، يجب أن تفكر في توفير حلول بديلة.

/* حل بديل باستعلام ميزة */
.blended-hero {
    /* حل بديل: تراكب داكن بسيط بدون مزج */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("hero.jpg") center/cover;
}

@supports (mix-blend-mode: multiply) {
    .blended-hero {
        background: url("hero.jpg") center/cover;
        position: relative;
    }

    .blended-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #2c3e50;
        mix-blend-mode: multiply;
    }
}

/* حل بديل لـ background-blend-mode */
.color-washed {
    /* حل بديل: عرض الصورة فقط */
    background: url("photo.jpg") center/cover;
}

@supports (background-blend-mode: overlay) {
    .color-washed {
        background-image: url("photo.jpg");
        background-color: #e74c3c;
        background-blend-mode: overlay;
        background-size: cover;
    }
}

الأداء وأفضل الممارسات

أوضاع المزج عموما ذات أداء جيد لأنها تُعالج بواسطة مركّب المتصفح. ومع ذلك، هناك بعض أفضل الممارسات يجب مراعاتها للأداء الأمثل والسلوك المتوقع.

/* 1. استخدم isolation لمنع المزج غير المتوقع */
.card-grid {
    isolation: isolate;
}

/* 2. فضّل background-blend-mode عند مزج الخلفيات */
/* إنها أكثر احتواء وقابلية للتنبؤ من mix-blend-mode */
.contained-blend {
    background-image: url("photo.jpg");
    background-color: #3498db;
    background-blend-mode: multiply;
    /* تؤثر فقط على خلفيات هذا العنصر نفسه */
}

/* 3. كن حذرا مع mix-blend-mode على العناصر الموضعة */
.positioned-blend {
    position: relative; /* ينشئ سياق تكديس */
    z-index: 1;
    mix-blend-mode: multiply;
    /* سياق التكديس قد يؤثر على سلوك المزج */
}

/* 4. اختبر أوضاع المزج عبر ألوان خلفية مختلفة */
/* نفس وضع المزج يمكن أن يبدو مختلفا جدا على أبيض مقابل داكن */

/* 5. تجنب مزج عناصر كبيرة فوق خلفيات معقدة */
/* هذا قد يكون مكلفا على الأجهزة ذات القدرة المنخفضة */
.performance-aware {
    will-change: mix-blend-mode; /* تلميح لتركيب وحدة الرسوميات */
}