ستقدم لك هذه المقالة المفهوم الذي سيساعدك على فهم التعتيم في ويخبرك بكيفية التحكم في هذه المعلمة. سيتم تغطية المؤشرات التالية في هذه المقالة ،
- التعتيم في CSS
- التعتيم موروث مع العناصر المتتالية
- إعداد سمة RGBA للعناصر المتتالية
- يتغير التعتيم على تأثير التمرير
عتامة الخلفية لعنصر ما هي إعداد ميزة مفيدة في تصميم HTML. من خلال تعيين مستوى التعتيم (عكس الشفافية) ، يمكن للمصمم التحكم في رؤية العنصر من خلال خاصية عتامة CSS. يستخدم هذا بشكل عام كإعداد للخلفية عندما يكون هناك سلسلة متتالية من العناصر ، يتم وضعها فوق الأخرى.
السيناريو الأكثر شيوعًا الذي يتم فيه استخدام هذه الميزة هو:
- يتم وضع صورة خلفية شفافة جزئيًا خلف عنصر نصي.
- تكون صورة الخلفية مرئية بشكل ضبابي ، لذا فهي لا تهيمن على النص الموجود في المقدمة.
- قد يتم التركيز على الصورة بالكامل عندما يختار المستخدم رؤيتها صراحةً.
قد ترغب في قراءة ما يصل إلى قبل الشروع في التعرف على عتامة CSS.
للحصول على برنامج تعليمي شامل لـ CSS ، قم بزيارة Edureka CSS تعليمي للمبتدئين . ستحصل على معلومات ممتازة عن طريقة استخدام CSS لزيادة تصميم الويب بتنسيق HTML.
المضي قدمًا في هذه المقالة حول التعتيم في CSS
التعتيم في CSS
في CSS ، يتم تعيين Opacity كقيمة رقمية تتراوح بين 0.0 و 1.0. تمثل القيم الأقرب للصفر مزيدًا من الشفافية ، وستكون الصورة فاتحة جدًا في الرؤية. لنبدأ بمثال على صورة معروضة بنسبة 50٪ من الشفافية. انظر المثال 1 أدناه.
مثال 1: ضبط صورة الخلفية على نصف الشفافية
img {opacity: 0.5 filter: alpha (opacity = 50) / * لـ IE8 والإصدارات السابقة * /} 
مثال 1: الإخراج
الصورة الأصلية (عتامة 100٪)
صورة مع إعداد التعتيم بنسبة 50٪
في المثال أعلاه ، كان هناك عنصر واحد فقط - صورة. يمكن أيضًا تعيين العناصر الأخرى باستخدام معلمة العتامة مثل النص وعناصر div وما إلى ذلك.
المضي قدمًا في هذه المقالة حول التعتيم في CSS
التعتيم موروث مع العناصر المتتالية
عندما يتم تكديس العناصر واحدة فوق الأخرى ، إذا كان لعنصر الخلفية إعداد التعتيم ، فسيتم توارثه بواسطة جميع العناصر الفرعية. هذا ال الإعدادات الإفتراضية . هذا يعني أنه إذا تم وضع مربع نص فوق صورة وكان للصورة إعداد عتامة 0.5 ، فسيكون كل من الصورة والعنصر النصي مرئيين جزئيًا فقط.
دعونا نأخذ مثيل عنصر نص فرعي موضوع فوق صورة TOM & JERRY في مثالنا التالي. يمكننا أن نرى تأثير التعتيم الافتراضي في المثال 2.
.container {position: النسبي محاذاة النص: عتامة المركز: 0.5}. مركز {موضع: مطلق علوي: 50٪ يسار: 50٪ تحويل: ترجمة (-50٪ ، -50٪) اللون: أزرق حجم الخط: 40 بكسل} } توم و جيريمثال 2: يرث النص العتامة من الصورة الأصلية
المضي قدمًا في هذه المقالة حول التعتيم في CSS
إعداد سمة RGBA للعناصر المتتالية
هناك طريقة أخرى يمكن من خلالها التحكم في التعتيم باستخدام العناصر المتتالية. إذا كنت تريد أن يظل العنصر الفرعي غير متأثر بعتامة عنصر الخلفية الخاص به ، فيمكنك استخدام إعداد سمة RGBA .
كيفية استخدام منصة جوجل كلاود
مثال 3: استخدام إعداد RGBA
الخلفية: rgba (76 ، 175 ، 80 ، 1.0) / * الصورة ليس بها إعداد تعتيم * / / * خلفية خضراء للنص مع عتامة 100٪ * / / * نص اللون الأزرق به تعتيم 100٪ * /
الخلفية: rgba (76 ، 175 ، 80 ، 0.4) / * الصورة ليس بها إعداد تعتيم * / / * خلفية خضراء للنص مع عتامة 40٪ * / / * النص الأزرق لا يزال يُرى مع عتامة 100٪ * /
بعد رمز اللون RGB ، تشير السمة 'a' إلى ألفا . ال ألفا المعلمة رقم بين 0.0 (شفافة بالكامل) و 1.0 (معتم بالكامل).
المضي قدمًا في هذه المقالة حول التعتيم في CSS
يتغير التعتيم على تأثير التمرير
في بعض السيناريوهات ، يريد مصممو الويب أن يتغير التعتيم اعتمادًا على ما إذا كان المستخدم يركز على العنصر أم لا. على سبيل المثال ، لنفترض أن الصورة مضبوطة على عتامة بنسبة 50٪ بشكل افتراضي. ومع ذلك ، عندما يقوم المستخدم بتمرير الماوس فوق الصورة ، فإننا نريد أن تصبح الصورة في التركيز الكامل مع عتامة 100٪.
يوضح المثال 4 كيف يتم ذلك.
النقاط المشتركة التي يجب ملاحظتها:
- يعد إعداد التعتيم بديلاً عن استخدام سمة 'visibility' في CSS. ومع ذلك ، فإن استخدام إعداد العتامة يجعل من السهل تعيين درجات متفاوتة من الشفافية ، تتراوح من صفر إلى كامل.
- يتم تحديد مستوى التعتيم بعد اختبار دقيق في مختلف المتصفحات. عند ضبط العتامة على قيم منخفضة ، قد يصبح النص أو الصورة أحيانًا غير مرئيين تمامًا أو غير قابلين للقراءة.
- تكمن الفكرة وراء استخدام التعتيم في التركيز بشدة على بعض العناصر بينما لا تشتت عناصر الخلفية الأخرى انتباه المستخدم. لذلك يتم تعيين عناصر الخلفية هذه بعتامة أقل.
- في Internet Explorer ، بالنسبة لـ IE8 والإصدارات الأقدم ، تكون خاصية العتامة عبارة عن إعداد 'مرشح' يتراوح من 1 إلى 100. في جميع المتصفحات الأخرى ، تتراوح من 0 إلى 1.
يقودنا هذا إلى نهاية هذه المقالة حول التعتيم في CSS.
إذا كنت مهتمًا بمعرفة المزيد حول تطوير الويب ، فاطلع على بواسطة Edureka. سيساعدك التدريب على اعتماد تطوير الويب في تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).
إذا كنت لا تزال مهتمًا. إذا كان لديك أي سؤال ، فيمكنك نشره في قسم التعليقات في مدونة 'Opacity In CSS' ، وسنعاود الاتصال بك في أقرب وقت ممكن.