تعتيم لون خلفية العنصر باستخدام CSS

يتضمن تحسين واجهة المستخدم تسليط الضوء على العناصر التفاعلية، مثل الأزرار، عن طريق تغيير مظهرها. الطريقة الشائعة هي تغميق لون الخلفية عند التمرير.

في البداية، قد يحاول المرء ضبط العتامة، لكن ذلك يؤثر على كل من اللون والشفافية. يوجد حل أكثر استهدافًا.

الطريقة: تراكب طبقة داكنة

قم بإنشاء تراكب داكن باستخدام صورة الخلفية. تحافظ هذه الطريقة على لون النص الأصلي مع تغميق الخلفية.

تنفيذ طبقة التراكب في CSS:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

تؤدي هذه التقنية إلى تعتيم أي لون خلفية تلقائيًا، حتى الألوان المتعددة كما هو موضح في المثال:

 some text 
من خلال الاستفادة من طريقة التراكب هذه، يمكن للمطورين بسهولة تغميق ألوان خلفية العناصر عند التمرير، مما يعزز تفاعل المستخدم دون الحاجة إلى حساب الظلال الداكنة يدويًا.