تعلم حول CSS3 العتامة

جعل خلفياتك شفافة

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

كيفية استخدام خاصية العتامة

تأخذ خاصية العتامة قيمة مقدار الشفافية من 0.0 إلى 1.0.

0.0 شفافة بنسبة 100٪ ، أي شيء أقل من هذا العنصر سيظهر تمامًا. 1.0 معتم 100٪ - لن يظهر أي شيء أسفل العنصر.

لذلك ، لتعيين عنصر إلى 50٪ شفاف ، يمكنك كتابة:

التعتيم: 0.5.

شاهد بعض الأمثلة على التعتيم في العمل

تأكد من الاختبار في المتصفحات القديمة

لا يدعم IE 6 أو 7 خاصية عتامة CSS3. لكنك لم تخرج من الحظ. بدلاً من ذلك ، يعتمد IE عامل تصفية ألفا خاصية Microsoft فقط. تسمح عوامل تصفية Alpha في IE بقيم من 0 (شفاف تمامًا) إلى 100 (معتمة تمامًا). لذلك ، للحصول على الشفافية في IE ، يجب عليك مضاعفة مستوى الشفافية بمقدار 100 وإضافة فلتر ألفا إلى أنماطك:

filter: alpha (opacity = 50)؛

انظر مرشح ألفا في العمل (IE فقط)

واستخدام بادئات المتصفح

يجب أن تستخدم البادئات -moz و webkit- بحيث تدعم الإصدارات القديمة من مستعرضات Mozilla و Webkit ذلك أيضًا:

-webkit-opacity: 0.5 ؛
-moz-opacity: 0.5 ؛
التعتيم: 0.5 ؛

ضع دائمًا بادئات المتصفح أولاً ، وتظل خاصية CSS3 الصالحة.

اختبر بادئات المتصفح في مستعرضات Mozilla و Webkit الأقدم.

يمكنك جعل الصور شفافة جدا

عيّن العتامة على الصورة نفسها وسيتلاشى في الخلفية. هذا مفيد حقًا لصور الخلفية .

وإذا قمت بإضافة علامة ارتساء ، فيمكنك إنشاء تأثيرات تحوم فقط من خلال تغيير عتامة الصورة.

a: hover img {
عامل التصفية: alpha (عتامة = 50)
عامل التصفية: progid: DXImageTransform.Microsoft.Alpha (عتامة = 50)
-moz-opacity: 0.5 ؛
-webkit-opacity: 0.5 ؛
التعتيم: 0.5.
}

يؤثر على HTML هذا:

اختبر الأنماط أعلاه و HTML في العمل.

ضع النص على صورك

باستخدام التعتيم ، يمكنك وضع نص على صورة وجعل الصورة تظهر لتتلاشى حيث يكون هذا النص.

هذه التقنية صعبة بعض الشيء ، لأنه لا يمكنك ببساطة تلاشي الصورة ، لأن ذلك سيؤدي إلى تلاشي الصورة بأكملها. ولا يمكنك إخفاء مربع النص ، لأن النص سيتلاشى أيضًا.

1. أولا قمت بإنشاء DIV حاوية ووضع صورتك في الداخل:

   
   

2. اتبع الصورة مع DIV فارغ - هذا هو ما ستجعله شفافًا.

   
   
   

3. آخر ما تضيفه في HTML الخاص بك هو DIV مع النص الخاص بك فيه:

   
   
   
   هذا كلبي شاستا أليس هو لطيف!

4. يمكنك تصميمه باستخدام وضع CSS ، لوضع النص فوق الصورة. لقد وضعت نصي على الجانب الأيسر ، ولكن يمكنك وضعه على اليمين من خلال تغيير اليسار إلى اليسار: 0؛ خصائص لليمين: 0 ؛ .

   #صورة {
   الموقف: النسبية.
   العرض: 170px؛
   الطول: 128px؛
   هامش: 0؛
   }
   #text {
   الموقف: مطلقة؛
   أعلى: 0؛
   اليسار: 0؛
   العرض: 60px؛
   الطول: 118px؛
   خلفية: # الاتحاد الفرنسي.
   الحشو: 5px؛
   }
   #text {
   التصفية: alpha (opacity = 70)؛
   عامل التصفية: progid: DXImageTransform.Microsoft.Alpha (عتامة = 70)؛
   -moz-opacity: 0.70 ؛
   التعتيم: 0.7.
   }
   #كلمات {
   الموقف: مطلقة؛
   أعلى: 0؛
   اليسار: 0؛
   العرض: 60px؛
   الطول: 118px؛
   خلفية: شفافة؛
   الحشو: 5px؛
   }

انظر كيف يبدو