يجعل تعتيم الصورة من الصعب رؤيتها ، ولكن قد يكون هذا هو التأثير الذي تبحث عنه فقط. تصبح الصورة المعتمة أقل بروزًا على صفحة ويب وتلفت انتباهًا أقل من الكائنات المحيطة بها. قد تقوم بتعتيم صورة لشاطئ مشمس ، على سبيل المثال ، لجذب تركيز المستخدم إلى قائمة أسفل الصورة. لا يتعين عليك إنشاء صور متعددة لإنتاج تأثير التعتيم هذا. يمكن لـ Cascading Style Sheets أو CSS تنفيذ هذه الخدعة باستخدام بضعة أسطر من التعليمات البرمجية.
CSS
CSS هي لغة يستخدمها مصممو المواقع لتحديد طريقة ظهور الكائنات على صفحات الويب. هذه السمات ، مثل اللون والتعتيم ، لها قيم كما هو موضح في المثال التالي: .redBorder {border-color: red؛ نمط الحدود: صلب ؛}
ينشئ هذا الرمز فئة CSS تسمى redBorder. إذا كانت إحدى علامات HTML img تشير إلى هذه الفئة ، فسيرى زوار الموقع حدًا أحمر ثابتًا حول الصورة عند عرضها على صفحة الويب الخاصة بك. يبدو رمز HTML الذي يشير إلى هذه الفئة على النحو التالي ويمكن إزالة الحد الأحمر عن طريق إزالة مرجع الفئة في علامة img هذه:.
تعتيم CSS
من خلال تغيير عتامة الصورة باستخدام CSS ، تجعلها باهتة. الكود الموضح أدناه ينشئ فئة تسمى opacity40 تحدد قيم العتامة بنسبة 40 بالمائة: .opacity40 {filter: alpha (opacity = 40)؛
العتامة: 0.4 ؛ }
تستخدم سمة مرشح الفئة مقياس عتامة بين 0 و 100 ، ولخاصية عتامةها مقياس عتامة بقيم تتراوح من 0 إلى 1. يضمن استخدام كلتا السمتين أن جميع المستعرضات يمكنها تغيير عتامة صورتك. أضف مرجع الفصل هذا إلى صورة لجعلها باهتة. يمكنك أيضًا إنشاء فئة باسم "opacity100" وتعيين قيمها بحيث تكون عتامة الصورة 100 بالمائة. ستجعل هذه الفئة الصورة معتمة.
يعتم برمجيًا
يمكن أن تعرض صفحة الويب الخاصة بك صورة باهتة عندما يفتح المستخدمون الصفحة ، أو يمكن أن يتسبب الرمز الخاص بك في تعتيم الصورة لاحقًا بعد تحميل الصفحة. لجعل الصورة باهتة في البداية ، اضبط عتامة الصورة على قيمة أقل ، كما هو موضح سابقًا. لتعتيم الصورة أثناء تشغيل التطبيق الخاص بك ، قم بتغيير اسم الفئة التي تحدد عتامة الصورة كما هو موضح في المثال أدناه: var imageObject = document.getElementById ("image1")؛ imageObject.className = "عتامة 40" ؛
هذه الشفرة ، التي تظهر داخل وظيفة JavaScript ، تحصل على مرجع للصورة وتغير اسم فئتها إلى "opacity40". يمكن للمستخدمين النقر فوق الزر الذي يقوم بتشغيل وظيفة JavaScript ، أو قد تسميها التعليمات البرمجية في أي وقت.
الاعتبارات
تحتاج وظيفة JavaScript إلى قيمة معرف الصورة التي ترغب في تعتيمها إذا كنت ترغب في تغيير تعتيمها ديناميكيًا. معرف الصورة في المثال الموصوف مسبقًا هو "image1". إذا كان لديك صور متعددة لتعتيمها ، فامنحها قيم هوية فريدة وقم بتمريرها إلى الوظيفة التي تقوم بتغيير العتامة. قم بإنشاء العديد من فئات CSS كما تريد والتي تحدد درجات مختلفة من التعتيم. يمكنك بعد ذلك تعتيم الصورة إلى أي درجة عن طريق تغيير مرجع فئتها في وظيفة JavaScript.