mix-blend-mode لمزج الطبقات
امزج ألوان العناصر مع المحتوى الموجود أسفلها باستخدام أوضاع مزج شبيهة بـ Photoshop في CSS
mix-blend-mode لمزج الطبقات درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو mix-blend-mode؟
تتحكم mix-blend-mode في كيفية مزج وحدات بكسل العنصر مع وحدات بكسل العناصر الموجودة تحته — على نحو مشابه لأنماط مزج الطبقات في Photoshop. وهي تؤثر في العنصر بأكمله، بما في ذلك خلفيته.
عادي (الافتراضي)
إن normal هو الوضع الافتراضي — دون مزج. ويغطي العنصر العلوي كل ما يوجد تحته.
multiply
يُغمّق multiply الألوان عبر ضرب قيم وحدات البكسل. ويتحول الأبيض إلى شفاف، بينما يبقى الأسود أسود. وهو مناسب جدًا لوضع صور داكنة فوق خلفيات ملونة.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
إن screen هو عكس multiply — فهو يزيد السطوع. ويتحول الأسود إلى شفاف، بينما يبقى الأبيض أبيض. وهو مناسب للتأثيرات الضوئية والتوهجات.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
يجمع overlay بين multiply وscreen. فتزداد قتامة المناطق الداكنة ويزداد سطوع المناطق الفاتحة. كما يزيد التباين مع الحفاظ على الدرجات المتوسطة.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
يطرح difference الألوان. وتنتج الألوان المتطابقة اللون الأسود، بينما تنتج الألوان المتعاكسة اللون الأبيض. وينشئ تأثيرات غريبة عالية التباين.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
الضوء القاسي والضوء الناعم
يطبّق hard-light تأثير multiply أو screen بحسب لون المصدر. أما soft-light فهو إصدار أنعم يعزز التباين بدرجة أقل.
أوضاع مزج الألوان
تمزج هذه الأوضاع خصائص لونية معينة فقط:
hue— يأخذ درجة اللون من العنصر العلوي، والتشبع والإضاءة من العنصر السفليsaturation— يأخذ التشبع من العنصر العلويcolor— يأخذ درجة اللون والتشبع من العنصر العلوي، والإضاءة من العنصر السفليluminosity— يأخذ الإضاءة من العنصر العلوي
وضع color للصور ثنائية اللون
أنشئ صورًا ثنائية اللون بوضع عنصر ملون فوق الصورة مع mix-blend-mode: color:
<div class="duotone"></div>
تأثير النص معكوس الألوان
نص يظهر بألوان معكوسة على أي خلفية:
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
سياقات التكديس ووضع المزج
يمزج mix-blend-mode العناصر الموجودة في سياق التكديس نفسه. وتنشئ الخاصية isolation: isolate على عنصر أب سياق تكديس جديدًا، ما يمنع أوضاع المزج من التأثير في العناصر الموجودة خارج المجموعة المعزولة.
تحقق سريع
أي وضع مزج يجعل الأجزاء البيضاء من العنصر شفافة ويحافظ على المناطق الملونة أو الداكنة، مثل الورق الشفاف؟
خلاصة
يمزج mix-blend-mode وحدات بكسل العنصر مع المحتوى الموجود تحته. ومن الأوضاع الأساسية: multiply (يُغمّق، ويحوّل الأبيض إلى شفاف)، وscreen (يزيد السطوع، ويحوّل الأسود إلى شفاف)، وoverlay (يعزز التباين)، وdifference (الطرح)، وcolor (يُعيد تلوين الصور). استخدم isolation: isolate على العنصر الأب لحصر نطاق المزج.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «mix-blend-mode لمزج الطبقات» مجاني؟
نعم — نص درس «mix-blend-mode لمزج الطبقات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «mix-blend-mode لمزج الطبقات»؟
امزج ألوان العناصر مع المحتوى الموجود أسفلها باستخدام أوضاع مزج شبيهة بـ Photoshop في CSS تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «mix-blend-mode لمزج الطبقات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- filter: blur وbrightness وcontrast وgrayscale
- backdrop-filter للزجاج المصنفر
- mix-blend-mode لمزج الطبقات
- خاصية isolation