طُلب مني مؤخرًا تصحيح صفحة مقصودة واحدة. من بين ما وجدته في الكود الخاص به صورة كانت فوقها عنصرين شبه شفافين يتداخلان فيها. كلاهما بنفس قيم لون RGB في الخاصية background-color. بدا شيء من هذا القبيل:<img src='myImage.jpg'/>
<div class='over1'></div>
<div class='over2'></div>
ليست هناك حاجة لاستخدام عنصرين من هذا القبيل. قد يكون هذا ضروريًا ما لم يكن ذلك يرجع إلى حقيقة أن عنصرًا واحدًا فقط لم يصبغ الصورة بما يكفي. لسبب ما ، قرر مؤلف الصفحة أن إضافة عنصر شفاف آخر متراكب على الصورة أفضل من زيادة قيمة المعلمة opacityالأولى. ونتيجة لذلك ، قررت التخلص من إحدى الطبقات وتعيين معلمة الطبقة المتبقية بحيث تبدو الصورة الخارجية بنفس الصورة السابقة. كل هذا جيد ، ولكن السؤال الذي يطرح نفسه: كيفية ضبط معلمة العنصر المتبقي بحيث تكون النتيجة هي نفسها عند تطبيق طبقتين شفافتين؟
opacityopacityإذا قرأت مقالتي هذه حول تكوين الأقنعة ، فربما تكون قد خمنت بالفعل كيفية اختيار القيمة المناسبة. بعد كل شيء ، يتم استخدام نفس الصيغة هنا ، والتي تم استخدامها هناك لتكوين العناصر الشفافة باستخدام mask-composite: add. إذا كان هناك طبقتين مع قيم الشفافية يساوي a0و a1، ثم يتم حساب قيمة المؤشر الناتج كما يلي:a0 + a1 - a0*a1
هنا يمكنك العثور على عرض توضيحي تفاعلي ، يمكنك من خلاله مقارنة كيفية ظهور الصورة ، محسنة بطبقتين ، يمكن التحكم في خصائصها opacity( a0و a1) بمساعدة أشرطة التمرير ، ونفس الصورة التي تم ضبطها بواسطة خاصية طبقة opacityيتم حسابها وفقًا للصيغة a0 + a1 — a0*a1.خيارات تلوين صورة ، يتم عرض نسختين بجانب بعضها البعض. منالمثير للاهتمام أن المناطق التي يوجد فيها عنصران شفافان ، وعنصر واحد من هذا القبيل ، تبدو متشابهة إذا لم يتم عرض الصورة أدناه (يمكنك تعطيل إخراج الصورة باستخدام مربع الاختيار الموجود في أسفل الشاشة). ولكن إذا تم عرض صورة تحت هذه الطبقات ، فسيكون الخياران مختلفان قليلاً. ربما يكون هذا الاختلاف مجرد نتيجة الوهم البصري ، ربما تبدو بعض أجزاء الصور أفتح أو أغمق بالنسبة لي مما هي عليه في الواقع.بالتأكيد لا تبدو مختلفة إذا لم تعرضها بجانب بعضها البعض ، ولكن ببساطة التبديل بين طبقتينopacityتتساوىقيمخصائصها معa0وa1، وطبقة واحدة ، opacityتم العثور على قيمتها في الصيغة a0 + a1 — a0*a1. هنا مثال ذو صلة.خيارات تلوين الصورة مع إمكانية التبديل بين طبقة شفافة وطبقتين.يمكن توسيع هذا المثال ليشمل المزيد من الطبقات. في هذه الحالة ، قم أولاً بحساب شفافية الطبقة الجديدة ، أي ما يعادل شفافية الطبقتين السفليتين. ثم ابحث عن شفافية الطبقة ، أي ما يعادل شفافية الطبقة الجديدة ، والطبقة فوقها مباشرة. تتكرر هذه العملية حتى تتم معالجة جميع الطبقات.اختزال عدة طبقات شفافة إلى طبقة واحدةجعلتني تجارب مماثلة أفكر في كيفية حساب معلمات صورة خلفية معتمة ، والتي تعادل طبقة معتمة (c0) وطبقة شفافة متراكبة عليها (c1التي تم تعيين شفافية عليهاa). في هذه الحالة ، يمكن العثور على الصورة النهائية ، وهي طبقة واحدة ، عن طريق معالجة قناة الصورة الأصلية حسب القناة ، في حين يتم حساب قيم ألوان القنوات الناتجة بالصيغة التالية:ch0 + (ch1 - ch0)*a
هنا ch0هي قناة من الطبقة السفلى مبهمة ( red، greenأو blue- على الأحمر والأخضر والألوان الزرقاء)، ch1هي قناة المقابلة للطبقة شفافة العليا، ومؤشر aهو مؤشر على أن مجموعات الشفافية في نفس طبقة شفافة.إذا كنت تعبر عن هذه الحجج في شكل رمز SCSS ، فستحصل على ما يلي:
@function res-ch($ch0, $ch1, $a) {
@return $ch0 + ($ch1 - $ch0)*$a
}
@function res-col($c0, $c1, $a) {
$ch: 'red' 'green' 'blue';
$nc: length($ch);
$ch-list: ();
@for $i from 0 to $nc {
$fn: nth($ch, $i + 1);
$ch-list: $ch-list,
res-ch(call($fn, $c0), call($fn, $c1), $a);
}
@return RGB($ch-list)
}
هنا مثال تفاعلي. من خلال تجريبها ، يمكنك مقارنة كيف تبدو الطبقتان وما يعادلهما ، مقدمة كطبقة واحدة. هنا يمكنك تحديد قيم ألوان RGB لطبقتين ، بالإضافة إلى مستوى الشفافية للطبقة الثانية.نتائج تطبيق طبقة شفافة على طبقة معتمةاعتمادًا على الجهاز ونظام التشغيل والمتصفح ، سترى أن لوحات الألوان في هذا المثال تبدو متشابهة ... أم لا. الصيغة صحيحة ، ولكن قد تختلف كيفية معالجة الطبقتين المصدر بالضبط في بيئات مختلفة.الجزء الأيسر من الصورة هو النتيجة المتوقعة لتقليل طبقتين إلى واحدة. يوضح الجانب الأيمن كيف ، عندما يتم دمج طبقتين (من الجزء العلوي الأيمن من الصورة) ، يمكن أن تبدو الطبقة الموضحة في أسفل اليمين مختلفة عما هو متوقع.طلبت من مستخدمي تويتر أن يرسلوا لي لقطات شاشة تم إنشاؤها باستخدام الإصدار التجريبي المبسط من هذا المثال. بالحكم على التعليقات التي تلقيتها ، يبدو أن اللوحين يبدوان دائمًا متشابهين في متصفحات الجوال (كل من Android و iOS) ، وكذلك في متصفح Firefox ، بغض النظر عن نظام التشغيل. دائمًا ما تبدو اللوحات متشابهة على نظام Windows ، على الرغم من أنني حصلت على إجابات تشير إلى أن Chrome و Chromium Edge يعرضان اللوحات في بعض الأحيان بشكل مختلف عن المتوقع.إذا تحدثنا عن المتصفحات القائمة على WebKit التي تعمل على نظامي macOS و Linux ، فيمكن ملاحظة أن النتائج غير متجانسة للغاية. في معظم الحالات ، يختلف لون الألواح قليلاً. لكن استخدام ملف تعريف اللون sRGB يساعد في جعل اللوحات تبدو متشابهة. يبدأ الأمر الأكثر إثارة للاهتمام إذا تم أخذ هذا المثال بعين الاعتبار في نظام يستخدم شاشتين. يمكن أن يؤدي سحب نافذة من شاشة إلى أخرى إلى حقيقة أن الفرق بين اللوحات إما مرئي أو غير مرئي.وتجدر الإشارة إلى أن الفرق في السيناريوهات الحقيقية صغير جدًا ، وأنه من غير المحتمل أن يكون زوج من هذه الألواح بجوار بعضهما البعض. ولكن حتى لو كان هناك اختلاف ، فلن يعرف أحد عنه حتى يختبر الصفحة في بيئات مختلفة. على أي حال ، يمكن لمطور الويب فقط القيام بذلك. بالإضافة إلى ذلك ، هناك شعور بأن ألوان العناصر المعتمة العادية يمكن أن تبدو مختلفة أيضًا عند استخدام أجهزة وأنظمة تشغيل ومتصفحات مختلفة. على سبيل المثال ، يبدو اللون #ffa800، الذي يستخدم على نطاق واسع على css-tricks.com ، مختلفًا على أجهزة الكمبيوتر المحمولة الخاصة بي مع Ubuntu و Windows. ولكن بعد كل شيء ، يمكن لأعين الأشخاص المختلفين إدراك نفس الألوان بطرق مختلفة.القراء الأعزاء! هل واجهت مشاكل مع متصفحات أو أنظمة تشغيل أو أجهزة مختلفة تعرض ألوانًا مختلفة لصفحات الويب؟