انتقل إلى محتوى الدرس
الدرس 67
دورة لغة CSS

الشفافية في لغة CSSCSS Transparency Opacity

سوف تتعلم في هذا الدرس كيفية عمل صور وخلفيات صور شفافة أو خلفيات لون شفافة ويمكن إضافة عناصر شفافة فوق عناصر أخري عن طريق خاصية opacity في لغة CSS.

أقسام الدرس
4
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
8,116
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

CSS Opacity الشفافية في لغة CSS

تُستخدم خاصية opacity في لغة CSS لعمل خلفيات شفافة ويمكن أيضاً التحكم في درجة الشفافية أو درجة الوضوح وتحدد قيمتها من 0.0 إلي 1.0 حيث 0.5 50% شفافية.

opacity 1

opacity 0.5

opacity 0.3

opacity 0.1

CSS Opacity Syntax

طريقة كتابة خاصية opacity في لغة CSS.

HTML
opacity:value;

CSS opacity values

قيم خاصية opacity في لغة CSS.

HTML
opacity:number|initial|inherit;

CSS opacity number خاصية opacity مع القيمة number في لغة CSS

 تُستخدم خاصية opacity مع القيمة number في لغة CSS للتحكم في درجة شفافية الصور والعناصر والخلفيات.

CSS Opacity 0.1

خاصية opacity مع القيمة 0.1 في لغة CSS.

CSS Opacity 0.3

خاصية opacity مع القيمة 0.3 في لغة CSS.

CSS Opacity 0.5

خاصية opacity مع القيمة0.5 في لغة CSS.

CSS Opacity 0.7

خاصية opacity مع القيمة 0.7 في لغة CSS.

CSS Opacity 1

خاصية opacity مع القيمة 1 في لغة CSS.

CSS opacity with hover خاصية opacity مع hover في لغة CSS

تستخدم خاصية opacity مع hover في لغة css لتغيير قيمة opacity عند الوقوف علي العنصر ليتغير شكل العنصر بطريقة جذابة.

CSS opacity with hover

خاصية opacity مع hover في لغة CSS.

HTML
img:hover
{
  opacity: 1.0;
}

CSS opacity with background color خاصية opacity مع الخلفيات الألوان في لغة CSS

تستخدم خاصية opacity مع hover في لغة css لتغيير قيمة opacity عند الوقوف علي العنصر ليتغير شكل العنصر بطريقة جذابة.

CSS opacity with background color

خاصية opacity مع الألوان في لغة CSS.

HTML
.one
{
width:24%;
height:200px;
background:blue;
display:inline-block;
opacity:0.3
}

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات8

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 8 مفهومةأول بطاقة، أول خطوة
01 Opacity مستوي الشفافية
للمراجعة
02 Syntax بناء الجملة
للمراجعة
03 Property خاصية
للمراجعة
04 Elements عناصر
للمراجعة
05 Value قيمة
للمراجعة
06 Background خلفية
للمراجعة
07 Transparent شفافية
للمراجعة
08 Hover يحوم
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم في تحديد شفافية العنصر ؟

____
02

ما المدي الذي يتراوح خلاله قيمة خاصية opacity ؟