CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2478

المواضيع

24
الشروحات chevron_left CSS Transparency Opacity chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.

opacity:value;
CSS opacity values

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

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.

img:hover
{
  opacity: 1.0;
}

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

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

CSS opacity with background color

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

.one
{
width:24%;
height:200px;
background:blue;
display:inline-block;
opacity:0.3
}
مصطلحات الدرس
Opacity
Opacity

مستوي الشفافية

Syntax
Syntax

بناء الجملة

Syntax
Syntax

بناء الجملة

Property
Property

خاصية

Elements
Elements

عناصر

Elements
Elements

عناصر

Value
Value

قيمة

Background
Background

خلفية

Transparent
Transparent

شفافية

Hover
Hover

يحوم

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات