الخاصية Opacity
دعم الخاصية Opacity من قبل متصفحات الويب
الخاصية Opacity هي جزء من مواصفات CSS3 ، لكنها كانت موجودة لفترة طويلة. ومع ذلك ، فإن المتصفحات القديمة لها طرق مختلفة للتحكم في العتامة أو الشفافية.
الخاصية Opacity في المتصفحات Firefox و Safari و Chrome و Opera و IE9 و Edge
فيما يلي كيفية استعمال الخاصية opacity في جميع المتصفحات الحالية.
- p {
- opacity: 0.7;
- }
في المثال أعلاه ستعمل الخاصية opacity على جعل عنصر الفقرة 70٪ معتمًا (أو 30٪ شفافًا).
تأخذ الخاصية opacity قيمة من 0.0 إلى 1.0. الإعلان opacity: 1; سيجعل العنصر معتمًا تمامًا (أي 0٪ شفافًا) ، بينما الإعلان: opacity: 0; سيجعل العنصر شفافًا تمامًا (أي 100٪ شفاف).
إستخدام الخاصية Opacity مع الصور
يمكننا أيضًا إنشاء صور شفافة باستخدام الخاصية Opacity. الصور الثلاث في الرسم التوضيحي أدناه كلها من نفس الصورة المصدر. الفروق الوحيدة بينهما هي مستوى التعتيم opacity .
opacity : 1
opacity : 0.7
opacity : 0.3
- div img:first-child {
- opacity: 1;
- }
- div img:nth-child(2) {
- opacity: 0.7;
- }
- div img:last-child {
- opacity: 0.3;
- }
تغيير عتامة الصورة عند تقريب مؤشر الفأرة
يوضح المثال التالي الاستخدام الشائع لعتامة الصورة في لغة CSS ، حيث يتغير عتامة الصور عندما يحرك المستخدم مؤشر الفأرة فوق الصورة.
حرك مؤشر الفأرة فوق الصور لرؤية التأثير
- .imgCounter img {
- width: 100%;
- opacity: .5;
- }
- .imgCounter img:hover {
- opacity: 1;
- }
RGBA وضع النص في صندوق شفاف بإستخدام
بالإضافة إلى RGB أدخلت لغة CSS بإصدارها الأخير CSS3 طريقة جديدة لتحديد لون يتضمن شفافية ألفا كجزء من قيمة اللون وهي RGBA.
RGBA تعني أحمر أزرق أخضر ألفا.
يعد إستخدام RGBA طريقة سهلة للغاية لضبط الشفافية للون.
- div {
- background: rgba(200, 54, 54, 0.5);
- }
- p {
- color: rgba(200, 54, 54, 0.25);;
- }
تمثل الأرقام الثلاثة الأولى اللون في قيم RGB مثل الأحمر (0-255) والأخضر (0-255) والأزرق
إحدى السمات المهمة التي يجب ملاحظتها حول شفافية RGBA هي القدرة على التحكم في عتامة اللون الفردي. باستخدام RGBA ، يمكننا أن نجعل لون نص العنصر شفافًا ونترك الخلفية سليمة.
RGBA
RGBA
RGBA
RGBA
أو دعنا نترك لون النص وحده ونقوم بتغيير شفافية الخلفية فقط.
RGBA
RGBA
RGBA
RGBA