خاصية 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>

بعض إستخدامات خاصية 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>

يمكنك أيضًا إستخدام خاصية 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>

هل هناك بديل لخاصية الـ 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>