شفافية CSS / الشفافية

شفافية الخصائص تحدد شفافية العنصر/الشفافية.

الصورة الشفافة

شفافية القيمة الممكنة للخصائص تتراوح بين 0.0-1.0. القيمة الأدنى، الشفافية أعلى:

قهوة

opacity 0.2

قهوة

opacity 0.5

قهوة

opacity 1

مثال

img {
  opacity: 0.5;
}

تجربة شخصية

تأثير الشفافية عند وضع الفارغ

شفافية عادة ما تستخدم الخاصية مع :hover يستخدم مع ميزة التغيير في الشفافية عند وضع الفارغ:

توليب
توليب
زهور

مثال

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

تجربة شخصية

توضيح المثال

النص الأول من CSS يشبه الكود في مثال 1. بالإضافة إلى ذلك، قمنا بإضافة تأثير عند وضع الفارغ على إحدى الصور. في هذه الحالة، عند وضع الفارغ على الصورة، نريد أن تكون الصورة غير شفافة. هذا الكود CSS هو opacity:1;.

عندما يتحرك مؤشر الفأرة بعيدًا عن الصورة، تصبح الصورة شفافة مرة أخرى.

مثال على تأثير العكس عند التمرير فوق الصورة:

توليب
توليب
زهور

مثال

img:hover {
  opacity: 0.5;
}

تجربة شخصية

المربعات الشفافة

استخدام شفافية عندما يتم إضافة شفافية إلى خلفية العنصر، تنقل هذه الشفافية إلى جميع العناصر الفرعية، مما قد يجعل النصوص داخل العناصر الشفافة صعبة القراءة:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

مثال

div {
  opacity: 0.3;
}

تجربة شخصية

استخدام شفافية RGBA

إذا كنت لا ترغب في تطبيق شفافية على العناصر الفرعية، مثل المثال أعلاه، استخدم RGBA قيمة الألوان. في المثال التالي، يتم تعيين لون الخلفية وليس شفافية النص:

شفافية 100%
شفافية 60%
شفافية 30%
شفافية 10%

لقد تعلمت من ألوان CSS في هذا الفصل تعلمت كيفية استخدام RGB كقيمة الألوان. بالإضافة إلى RGB، يمكنك أيضًا استخدام RGB قيمة الألوان مع قناة الألفا (RGBA) - تقوم هذه القناة بتحديد شفافية الألوان.

يحدد قيمة RGBA الألوان كالتالي: rgba(الأحمر, الأخضر, الأزرق, الألفا) الألفا الم参数 هو عدد بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف تمامًا).

نصيحة:ستجد في ألوان CSS في هذا الفصل تعلمت المزيد عن RGBA الألوان.

مثال

div {
  background: rgba(76, 175, 80, 0.3) /* شفافية 30% خلفية زرقاء */
}

تجربة شخصية

نصوص داخل مربع شفاف

هذه بعض النصوص الموجودة داخل مربع شفاف.

مثال

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>هذا نص موجود داخل مربع شفاف.</p>
  </div>
</div>
</body>
</html>

تجربة شخصية

توضيح المثال

أولاً، قمنا بإنشاء عنصر <div> يحتوي على صورة خلفية ولون الهوامش (class="background").

ثم، قمنا بإنشاء <div> آخر في <div> الأول (class="transbox").

<div class="transbox"> يحتوي على لون الخلفية والهوامش - هذا div شفاف.

في <div> الشفاف، قمنا بإضافة بعض النصوص في عناصر <p>.