كيفية عرض النص على الصورة باستخدام CSS3 mix-blend-mode
خلفيات الصور تبدو كبيرة وراء النصوص عرض كبير. ومع ذلك ، فإن تطبيق CSS ليس بهذه السهولة. يمكننا استخدام خلفية مقطع: النص. خاصية ، ومع ذلك لا تزال ميزة تجريبية دون دعم متصفح كاف.
بديل CSS لإظهار خلفية صورة خلف النص هو باستخدام مزيج مزيج الوضع خاصية. مزج أوضاع عناصر HTML يتم دعمها بشكل كبير عبر جميع متصفحات سطح المكتب والجوال الحديثة باستثناء عدد قليل ، مثل Internet Explorer.
في هذا المنشور ، سنرى كيف مزيج مزيج الوضع (اثنان من أوضاعه على وجه التحديد) يعمل ، وكيف يمكنك استخدامها ل عرض النص مع خلفية الصورة في حالتين استخدام:
- عندما تكون صورة الخلفية تستطيع رؤيتها من خلال النص
- عندما تكون صورة الخلفية تركض النص
انظر بعض الأمثلة في العرض التوضيحي أدناه (الصور من موقع unplash.com).
ال مزيج مزيج الوضع تحدد خاصية CSS كيف يحتوى و ال خلفية من عنصر HTML يجب مزيج معا colorwise.
ألقِ نظرة على قائمة أوضاع المزج التي سنستخدمها تتضاعف و شاشة في هذا المنصب.
أولاً ، دعونا ننظر في كيفية عمل هذين الوضعين المختلطين.
ماذا تتضاعف و شاشة مزيج طرق العمل
مزج وسائط من الناحية الفنية هي الوظائف التي حساب قيمة اللون النهائي باستخدام مكونات اللون لعنصر وخلفيته.
ال تتضاعف وضع مزيج
في ال تتضاعف وضع مزيج ، والألوان الفردية للعناصر والخلفيات الخاصة بهم مضاعف, ويتم تطبيق اللون الناتج على الإصدار النهائي الممزوج.
ال تتضاعف يتم احتساب وضع المزج وفقًا للصيغة التالية:
B (Cb، Cs) = Cb × Cs
أين:البنك التجاري - مكون اللون للخلفيةخدمات العملاء - مكون اللون للعنصر المصدرب - مزج وظيفة
متى البنك التجاري و خدمات العملاء يتم ضربها ، واللون الناتج هو مزيج من هذين المكونين للون ، وهو مظلمة مثل أحلك من اللونين.
لإنشاء خلفية صورة نصية ، نحتاج إلى التركيز على الحالة متى خدمات العملاء (مكون اللون للعنصر المصدر) هو إما أسود أو أبيض.
إذا خدمات العملاء هو أسود قيمتها هي 0, سوف يكون لون الإخراج أيضا أسود ، لأنه Cb × 0 = 0. لذلك ، عندما يكون العنصر باللون الأسود ، فإنه لا يهم ما لون الخلفية, كل ما يمكن أن نرى بعد المزج هو الأسود.
إذا خدمات العملاء هو أبيض قيمتها هي 1, لون الإخراج هو كل شيء البنك التجاري لأنCb × 1 = Cb. لذلك في هذه الحالة نرى الخلفية مباشرة كما هو.
ال شاشة وضع مزيج
ال شاشة وضع مزيج يعمل على نحو مماثل ل تتضاعف وضع مزيج ، ولكن مع النتيجة المعاكسة. اذن مقدمة سوداء يظهر الخلفية كما هو, و تظهر الواجهة البيضاء بيضاء مع أي خلفية.
دعنا نرى سريعا صيغته:
B (Cb، Cs) = Cb + Cs - (Cb × Cs)
متى خدمات العملاء هو أسود (0) ، سيظهر لون الخلفية بعد المزج ، مثل:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
متى خدمات العملاء هو أبيض (1) ستكون النتيجة بيضاء مع أي خلفية ، مثل:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. الصورة المعروضة من خلال النص
لعرض نص يظهر من خلال صورته الخلفية ، نستخدم شاشة وضع مزيج مع نص أسود و المساحة المحيطة البيضاء.
ماء
.خلفية العرض: 600 بكسل ؛ الارتفاع: 210 بكسل ؛ صورة الخلفية: url (someimage.jpg) ؛ حجم الخلفية: 100 ٪ ؛ الهامش: السيارات ؛ .text color: black؛ لون الخلفية: أبيض. مزيج مزيج الوضع: الشاشة ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ حجم الخط: 160pt ؛ وزن الخط: أكثر جرأة. محاذاة النص: المركز ؛ ارتفاع الخط: 210 بكسل ؛ الهامش: 0
يشبه نصنا حاليًا أدناه ، في الخطوة التالية ، سنضيف لونًا مخصصًا إلى الخلفية.
مضيفا اللون
كما كنت قد خمنت الآن ، فإن استخدام صيغ المزج لا تترك لنا سوى خيارين للألوان للمنطقة المحيطة بالنص - ابيض أم اسود. ومع ذلك مع الأبيض, من الممكن إضافة بعض الألوان إليها باستخدام تراكب, إذا كان لون التراكب يتطابق بشكل جيد مع الصورة المستخدمة.
لإضافة لون إلى المنطقة المحيطة ، أضف ماء باستخدام هذه التقنية ، يمكننا تلوين المنطقة المحيطة حول النص بخلفية الصورة: لاحظ أن الأسلوب يعمل بشكل جيد فقط مع ألوان شفافة خفية. إذا كنت تستخدم لونًا كاملاً بالكامل ، أو لونًا لا يتطابق مع الصورة ، فإن الصورة التي تظهر داخل النص سيكون لها لون مرئي جدًا من اللون المستخدم ، لذلك ما لم يكن ذلك مظهرًا تريده., تجنب الألوان المعتمة. على الرغم من وضع النص العادي على خلفية الصورة يتطلب نفس التقنية, سأريكم مثالاً على كيف يبدو العرض التوضيحي أعلاه عندما تم عكس التأثير, أي عندما يكون لون النص أبيض والخلفية سوداء. يمكنك استعمال ال تراكب نفسه لإضافة بعض الألوان إلى النص ، إلا إذا كنت تريد الاحتفاظ به أبيضًا. ويمكنك أدناه رؤية كيف تبدو الحالة العكسية: لاحظ أنه في Internet Explorer ، أو أي متصفح آخر لا يدعم مزيج مزيج الوضع: ضرب خاصية التراكب ، حيث يساعد في لون خلفية التراكب على مزيج أفضل قليلا مع الصورة التي تظهر داخل النص.
.overlay background-colour: rgba (0،255،255، .1)؛ مزيج مزيج الوضع: تتضاعف. العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ الموقف: مطلق ؛ أعلى: 0 ؛
2. النص محاطة بخلفية الصورة
.نص اللون: أبيض؛ لون الخلفية: أسود. مزيج مزيج الوضع: الشاشة ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ حجم الخط: 160pt ؛ وزن الخط: أكثر جرأة. محاذاة النص: المركز ؛ ارتفاع الخط: 210 بكسل ؛ الهامش: 0
.overlay background-colour: rgba (0،255،255، .1)؛ مزيج مزيج الوضع: تتضاعف. العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ الموقف: مطلق ؛ أعلى: 0 ؛
مزيج مزيج الوضع خاصية ، لن تظهر خلفية الصورة ، وسيظل النص أسود (أو أبيض).
