التحكم في شفافية الصور عبر الوسم opacity في لغة CSS الدرس |10| - Programmer Tech

Programmer Tech

تعلم البرمجة - علوم الكمبيوتر - أمن المعلومات - القرصنة الأخلاقية

إعلان اعلى المقالة

الثلاثاء، 3 نوفمبر 2020

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

 

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

في الدرس السابق تحدثنا عن خاصية 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 لم تتأثر بشيئ.

ليست هناك تعليقات:

إرسال تعليق

facebook

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *