الكورس

Advertisements

خاصية Opacity فى CSS


سيعلمك هذا الفصل خاصية Opacity فى CSS بالتفصيل، وكيفية إستخدامها مع بعض الأمثلة التوضيحية.


 

خاصية Opacity فى CSS

 

تحدد خاصية opacity في CSS مدى شفافية العنصر، كالتالى:

<style>
    .h2_with_opacity {
        opacity: 0.5;
    }
</style>

<h2>h2 without opacity!</h2>
<h2 class="h2_with_opacity">h2 with opacity!</h2>

h2 without opacity!

h2 with opacity!

القيمة الإفتراضية للخاصية opacity هى initial. وقيمتها 1.0 (أى شفافية بنسبة 100٪).


 

بعض إستخدامات خاصية Opacity

 

غالبًا ما تُستخدم خاصية الـ opacity مع تأثير الـ hover لتغيير الـ opacity عند تمرير الماوس، كالتالى:

<style>
    div img {
        display: inline-block;
        margin: 3px;
        height: 138px;
        opacity: 0.5;
        width: 208px;
    }
    
    div img:hover {
        opacity: 1.0;
    }
</style>


<div>
    <img src="image1.png" alt="image example">
    <img src="image2.png" alt="image example">
    <img src="image3.png" alt="image example">
</div>
example image image example image example

 

يمكنك أيضًا إستخدام خاصية opacity على النصوص عند تحريك الماوس عليها، كالتالى:

<style>
    p {
        opacity: 0.4;
    }

    p:hover {
        opacity: 1.0;
    }
</style>


<p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p>

Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.


 

هل هناك بديل لخاصية الـ opacity؟

 

نعم، إذا كنت لا تريد إستخدام خاصية الـ opacity، يمكنك استخدم قيم ألوان RGBA، كالتالى:

<style>
    p {
        color: rgba(21, 59, 12, 0.24);
    }

    p:hover {
        color: rgba(0, 0, 0, 1);
    }
</style>


<p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.</p>

Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements