التحكم في شفافية الصور
في الدرس السابق تحدثنا عن خاصية deriction أما في هذا الدرس سوف نتعرف على خاصية opacity الذي تتحكم بشفافية العناصر عن طريق css.
مثال
<body>
<article>
<h2>تعلم لغة بايثون من البداية للأحتراف</h2>
<img src="prtech.png" />
</article>
</body>
النتيجة ستكون بالشكل الآتي في المتصفح بدون استخدام css.
و في ملف css يكون بالشكل
قبل البدء بكتابة اكواد الـ css نقوم بوضع id للوسم article مثلاً articleId و نبدأ بكتابة الأكواد
#articleId{
opacity: 0.4;
}
ونتيجة المتصفح
كما نلاحظ أنه الشفافية تعمل و انخفضت, و كانت 0.4 هي نسبة الغموض يعني 40% و إذا كتبنا 0.9 يعني الغموض يكون 90% و إذا كتبناها 1 ستبقى كما هي أي 100% و إذا وضعناها 0 سيختفي كل شي لأن نسبة الغموض ستكون 0 اي لا يظهر شيئ.
فإذا أردنا فقط على الصورة يحدث شفافية و لا يتم الغموض على الوسم article بالكامل, بنفس الطريقة نقوم بوضع id للصورة فقط و نقوم بالتحكم بالشفافية.
مثال
سنقوم بوضع ايدي للصورة فقط مثلاً imageId و نكتب الأكواد بالشكل
#imageId{
opacity: 0.3;
}
عندما نقوم بفتحه في المتصفح سيكون
كما نلاحظ ان الشفافية حصلت على الصورة فقط ام الكتابة في الوسم h لم تتأثر بشيئ.
كل التوفيق صديقي
ردحذفالله يحفظك يغالي
حذف