العتامة في CSS هي خاصية تحدد التحكم في شفافية العناصر مثل محتوى أو الصور . باستخدام هذه الخاصية، يمكننا ضبط أي صور لتكون معتمة تمامًا ( مرئي )، شفاف بالكامل ( مختفي ) أو نصف شفاف (مرئي جزئيًا). يأخذ قيمة رقمية تقع بين 0 و 1. حيث 0 يحدد الشفافية الكاملة و 1 يحدد المرئية بالكامل. تعمل قيم العتامة بين 0 و1، مثل 0.2، 0.4، 0.6، وما إلى ذلك، على تغيير الصورة من شفافة إلى معتمة عن طريق زيادة القيمة العشرية تدريجيًا.

بناء الجملة

 opacity : 

يجب أن تكون القيمة الرقمية بين 0 و1 لجعل الصورة شبه شفافة. إذا قدمنا ​​1، ستكون الصورة معتمة، وإذا كانت القيمة الرقمية 0، تصبح الصورة شفافة تمامًا.

مثال 1 : في هذا المثال، سوف نستخدم خاصية العتامة لجعل العنصر شفافًا عند تحريك الماوس فوق العنصر.

Main.html

 Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. 

انتاج |

قم بالماوس فوق المربع الأحمر لعرض تأثير شفاف أو عتامة.

عتامة الانتقال في CSS

في CSS، أ عتامة الانتقال هي خاصية تستخدم لتغيير حالة العتامة بسلاسة من مستوى إلى حالة أخرى. وهذا يعني أن عتامة الانتقال تغير حالة العنصر المعتم إلى شفاف مع مدة زمنية محددة. يحتوي الانتقال على أربع خصائص: خاصية الانتقال، ومدة الانتقال، ووظيفة توقيت الانتقال، وتأخير الانتقال، المستخدمة لتنفيذ تأثير العتامة على الصورة. ال المدة الانتقالية هي خاصية مهمة للتغييرات التدريجية أو التغييرات المفاجئة التي تعكس تأثير العتامة على عنصر ما خلال مدة زمنية محددة بالمللي ثانية أو الثواني.

الخاصية المختصرة للانتقال هي كما يلي:

 transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay]; 

بناء الجملة لتحديد عتامة الانتقال في CSS

 { transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } 

خاصية انتقالية

فيما يلي خصائص الانتقال المستخدمة للتحكم في تأثيرات الانتقال.

ملاحظة: أثناء تعيين خاصية الانتقال إلى الصورة أو المحتويات، يجب علينا تحديد خاصية مدة الانتقال؛ وإلا تصبح المدة 0، ولن يظهر أي تأثير.

الحاجة إلى عتامة الانتقال في CSS

ال العتامة هي خاصية CSS بسيطة تستخدم للتحكم في شفافية الصورة عن طريق ضبط نطاق العتامة من 0 إلى 1. وهي تعكس التغيير الثابت أو المفاجئ على عنصر لإظهار تأثير العتامة. على سبيل المثال، إذا أردنا عرض صورة شفافة، فيجب علينا ضبط قيمة العتامة من 0 إلى 1. وبعد ذلك، يظهر تأثير العتامة على الفور بدلاً من أن يستغرق بعض الوقت. ولذلك نستخدم أ عتامة الانتقال في CSS الذي يتحكم في شفافية العنصر خلال فترة زمنية محددة. باستخدام دالة وقت الانتقال في عتامة الانتقال، يمكننا تحديد منحنى سرعة العنصر الذي يحدد تأثير العتامة السريع على الصورة. بهذه الطريقة، نستخدم تأثير عتامة الانتقال ليعكس التغييرات في الفترة الزمنية المحددة بدلاً من حدوثها على الفور.

مثال 2: في هذا المثال، سنستخدم خاصية عتامة الانتقال التي تعكس تأثير العتامة في مدة زمنية محددة بدلاً من أن تعكسها على الفور.

File1.html

 CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p>  https://www.javatpoint.com/  </p> 

انتاج |