recent
أخبار ساخنة

التحكم في شفافية الصور عبر opacity في لغة CSS

الصفحة الرئيسية
التحكم في شفافية الصور عبر opacity

التحكم في شفافية الصور

خاصية 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 بدلاً من ذلك.

google-playkhamsatmostaqltradent