شفافية الحدود css : تعرف على ابرز مزايا لغة CSS

هذه خاصية للرسومات وتشير إلى إعطاء قيمة في دالة للقيام بمعادلة حسابية بسيطة للحصول على نتيجة معامل المظهر أو العتامة والشيء الجميل هو أن لغة CSS تحتوي على هذه الخاصية لاستخدامها في صفحاتنا.

 

تعريف

للشفافية استخدامات عديدة ، كما قلنا ، لكن تسميتها في CSS بسيطة جدًا:

Opacity:value;

يتم استدعاؤها في قيمة من 0 عشري إلى 1 عدد صحيح ، وكلما اقتربت القيمة من 1 كانت أقرب إلى الوضوح.

 

فوائد

استخدام التعتيم له فوائد عديدة منها:

  • يتم استخدامها في المكونات الجانبية على الصفحة وليس لها فائدة كبيرة.
  • يستخدم على نطاق واسع في الصور المصغرة.
  • علامات Html النشطة وغير النشطة مثل القوائم أو الأقسام.

 

مثال

من فضلك ، لفهم عتامة CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width:500px;
    height:100px;
    padding:10px;
    background-color:#D9D9D9;
    Opacity:0.4;

}

div:hover{
    width:500px;
    height:100px;
    padding:10px;
    background-color:#D9D9D9;
    Opacity:1;

}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Opacity</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            This is our opacity div
        </div>
    </body>

</html>