عتامة لون الخلفية دون التأثير على النص

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

حل rgba

الحل الأكثر فعالية والمدعوم على نطاق واسع هو استخدام "RGBA" ( خاصية الأحمر، الأخضر، الأزرق، ألفا). إليك مثال:

.alpha60 {
  background-color: rgba(0, 0, 0, 0.6);
}

تحدد الخاصية 'rgba' لون الخلفية بالإضافة إلى قناة ألفا أو الشفافية. في هذه الحالة، يتم ضبط الخلفية على اللون الأسود مع نسبة عتامة تبلغ 60%. سيعمل هذا الأسلوب في معظم المتصفحات الحديثة.

IE Fallbacks]

.alpha60 { لون الخلفية: rgb(0, 0, 0); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

.alpha60 {
  background-color: rgb(0, 0, 0);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

لضمان الشفافية، من الضروري الإعلان عن "الخلفية: شفافة" ضمن احتياطي CSS لـ IE. وهذا يضمن بقاء لون الخلفية شفافًا حتى في حالة عدم توفر دعم قناة ألفا.