التحكم في شفافية الصور
خاصية opacity البسيطة جداً تسمح لنا بالإشارة إلى مستوى الشفافية أو التعتيم للصفحة أو عنصر ما في صفحة الويب أي عندما نقوم بإستعمال القيمة 1 سوف يكون العنصر غير شفاف و بحالته الطبيعية, و هذا هو السلوك الإفتراضي, و عندما نقوم بإستعمال القيمة 0 سوف يكون العنصر شفاف, لذلك يتوجب إختيار القيمة بين 0 و 1 و بالتالي حينما نُعطي القيمة 0.6 سوف يكون العنصر معتم حتى المستوى 60٪ و هذا يمكننا الرؤية من خلاله.
مثال
<body>
<article>
<h2>تعلم لغة CSS من البداية للأحتراف</h2>
<img src="nusurtech.png" />
</article>
</body>و في ملف 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 لم تتأثر بشيئ.
ملاحظة
في حال قمت بتطبيق الخاصية opacity على عنصر ما من صفحة الويب فسوف تصبح جميع محتويات العنصر شفافة مثل الصور و عناصر أخرى في داخل هذا الوسم, و إذا كنت تريد تطبيق الخاصية opacity فقط جعل لون الخلفية شفاف فإستخدم تدوين RGBa بدلاً من ذلك.