اليوم ، أصبح تصميم الموقعفن حقيقي. إنها ليست مجرد مجموعة من عناصر الصفحة ذات لون وحجم معين وخطوط ذات أنماط مختلفة ورسومات موضوعية. من أجل جعل الموقع مختلفًا عن غيره ، لجذب انتباه الزوار وتوجيهه إلى عناصر معينة ، يتم استخدام عدد كبير من الأساليب والأدوات. من بينها خاصية css شائعة جدًا - الشفافية. هذه التقنية عصرية وفعالة للغاية ، وبالتالي يتم استخدامها غالبًا. يمكنك إضافة شفافية إلى كائنات مختلفة على صفحة الموقع - نص أو كتلة كاملة أو صورة ، على سبيل المثال. كما يتم تحقيقه بطرق مختلفة. دعونا نعتبرها أدناه.
معلمات لضبط شفافية العناصر
معلمات لضبط الدرجةشفافية العناصر ، عدة. يتم استخدامها اعتمادًا على الغرض المحدد ، بالإضافة إلى المتصفح الذي تم "تعديل" التصميم من أجله. وتشمل هذه الخصائص التالية:
- عتامة.
- منقي؛
- صورة PNG كخلفية.
تتغير قيم خصائص الشفافية cssعلى النحو التالي: كلما زاد الرقم ، انخفض مستوى شفافية العنصر. في العتامة ، يتراوح من 0 إلى 1 ، في عامل التصفية - من 10 إلى 100. ويتم استخدام الأخير لمتصفح Interet Explorer ، ويتم استخدام خاصية التعتيم لجميع الآخرين.
شفافية الصورة (متغير)
لنبدأ بالخيار عندما تظهر الشفافية عندما تحوم فوق العنصر بمؤشر الماوس.
دعونا نفكر في كيفية ضبط شفافية الصورة. تقدم CSS خيارين. للقيام بذلك ، تحتاج إلى تسجيله مباشرة في كود وثيقة html على النحو التالي:
- نشير إلى المسار إلى الصورة.
- تحديد معلمات الشفافية عند التمرير وليس. للقيام بذلك ، استخدم خاصيتي onmouseover و onmouseout ، حيث نكتب قيم التعتيم والتصفية.
يمكن كتابة نفس الخصائص في مستند css ، ويمكن إضافة رابط إليها فقط في التعليمات البرمجية المصدر. ستكون النتائج هي نفسها.
شفافية النص وكتل الصفحة
بالنسبة للنص أو الكتلة (شفافية div) ،يقترح css استخدام خيار مشابه لإنشاء شفافية الصورة ، أي باستخدام ملف css المضمن ، حيث سيتم تعيين المعلمات المطلوبة. يمكنك الذهاب بطريقة أسهل. عند تصميم قالب div أو النص p ، أضف كود html التالي لعنصري onmouseover و onmouseout. يعمل كلا الخيارين ويعطي النتيجة المرجوة.
شفافية ثابتة
في بعض الحالات ، يجب تعيين شفافية الكائن أو عنصر التصميم أو النص بشكل دائم. في هذه الحالة ، يكون الحل أسهل من التمرير فوق الماوس.
بالنسبة لعنصر css ، سيتم تعيين الشفافيةمع الكود التالي. في كتلة نمط div ، اكتب قيم الخلفية (على سبيل المثال ، # ff8800) ، والعتامة (على سبيل المثال ، 0.5) ، بالإضافة إلى العرض والحشو.
بالنسبة للصورة ، أدخل قيم العتامة والتصفية في التعليمات البرمجية ، وحدد أيضًا المسار إلى الصورة.
طريقة RGBA
هناك حالات استخدام أخرى أيضًاهذه الخاصية css: الشفافية يمكن تطبيقها على لون الخلفية لأي عنصر تصميم. لهذا ، يتم استخدام طريقة RGBA. تمثل الأحرف الثلاثة الأولى الألوان الأساسية (أحمر ، خالص ، أزرق) ، والأخير هو alpha ، الذي يحدد مستوى الشفافية. باستخدام تنسيق RGBA ، نحدد درجة الشفافية ، ونشير إليها في الرقم الأخير. على سبيل المثال ، مثل هذا: background: rgba (240،2،33،0.4035).
استنتاج
وهكذا ، في سياق العمل على استخدامتصميم الموقع عبارة عن خاصية css بسيطة لكنها فعالة "الشفافية" ، يمكنك جعل عناصرها أكثر تشويقًا وملاحظة بأقل جهد. ستساعدك الخيارات الموصوفة لتحديد خصائص الشفافية في ذلك.
