الدرس34 : إضافة خاصية الشفافية للعناصر ب css

شفافية css3

لقد جاءت css3 بطريقتين جديدتين لإضافة الشفافية لعناصر صفحة html. هاتين الخاصيتين هما: opacity و RGBa.

خاصية التعتيم opacity :

هذه الطريقة opacity تسمح لنا بتحديد نسبة غموض عنصر معين في صفحة html وهي ضد الشفافية. وتأخذ قيمة بين 0 و 1 .

- بقيمة 1 : سيكون العنصر غامض 100% ، يعني إفتراضي.

- بقيمة 0 : سيكون العنصر شفاف ولن يظهر حتى.

ولهذا يجب وضع قيمة بينهما لنظهر الشفافية هكذا:

p{
opacity: 0.6;
}

و لتجربة هذه الطريقة اعمل كود css متل التالي لكن ضع رابط صحيح للصور.

body
{
background: url('image.png');
}
p{
background-color: black;
color: white;
opacity: 0.3;
}

و هذه نتيجة الفقرات لا تظهر سوداء بل شفافة وتظهر الخلفية/

opacity هي الغمود عكس الشفافية، يعني كلما زادت قيمتها زاد الغمود وكلما نقصت زادت الشفافية.

خاصية RGBa :

RGBa و هي طريقة أخرى للتلاعب بالشفافية . تقريبا قد رأيناها سابقا ولكن كانت دون حرف a. وهو الذي يتحكم في الشفافية.و تعمل مثل الطريقة السابقة رقم واحد يعني قاتم، وأقل فهو شفاف.

p{
background-color: rgba(255, 0, 0, 0.5);
}

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

p{
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);
}

يمكنك تجربتها مرات عديدة حثى تفهمها جيدا، ننتظر الرد عليك.