استخدم css2.1 لتحقيق تأثيرات خلفية متعددة وحدود متعددة
استخدم CSS2.1 لتحقيق تأثير 3 صور خلفية وصورتين للمحتوى على عنصر HTML واحد، أو تأثير حدود متعددة. تنطبق طريقة التحسين التدريجي هذه على جميع المتصفحات التي تدعم عناصر CSS2.1 الزائفة وسمات تحديد موضعها. لا يلزم دعم CSS3.
العرض التوضيحي: خلفيات متعددة باستخدام CSS2.1
العرض التوضيحي: Polyborder باستخدام CSS2.1
المتصفحات المدعومة: Firefox 3.5+، Safari 4+، chrome4+، Opera10+، IE8+
كيف يتم تحقيق ذلك؟
بشكل أساسي، الكائنات الزائفة التي نقوم بإنشائها (:before و:after) هي نفس الطريقة التي نتعامل بها مع عناصر HTML المتداخلة. لكن لديهم ميزة فريدة تتفوق على عناصر HTML المتداخلة - فهي ليست دلالية.
عند استخدام خلفيات متعددة أو حدود متعددة، نحتاج إلى إصلاح محتوى طبقة العنصر الزائف خلف محتوى عنصر HTML باستخدام الموضع المطلق.
يتم تضمين المحتوى غير الحقيقي في عناصر زائفة لتحديد المواقع. وهذا يعني أنها يمكن أن تمتد بحرية ضمن حدود العنصر "الأصل" دون التأثير على محتواه. يمكن أن يجمع هذا بشكل تعسفي بين قيم الموضع المطلق للأعلى واليمين والأسفل واليسار والعرض والارتفاع. والمفتاح الرئيسي هو أن أداء المجموعة مرن.
ما هي الآثار التي يمكن تحقيقها؟
ما عليك سوى الاعتماد على عنصر HTML واحد والصور ذات الصلة لإنشاء أشياء مثل ألوان خلفية متعددة، وصور خلفية متعددة، وقطع صور الخلفية، وقلب الصور، ونماذج الصناديق القابلة للتوسيع باستخدام حدود الصور، والأعمدة الزائفة العائمة (ملاحظة Xiaozhi: الأعمدة الثلاثة تأثير متساوي الارتفاع (الذي سيتم ذكره لاحقًا)، صور خارج النموذج الصندوقي، حدود متعددة معروضة بالخارج، وغيرها من التأثيرات الشائعة. قد يتطلب صورتين إضافيتين للمحتوى في المحتوى الذي تم إنشاؤه.
ستظهر الخلفيات المتعددة باستخدام CSS2.1 والحدود المتعددة باستخدام الصفحات التجريبية لـ CSS2.1 كيفية استخدام تقنية الكائنات الزائفة CSS2.1 لتحقيق هذه التأثيرات الشائعة.
تحتوي معظم الهياكل على عناصر فرعية. لذلك، في كثير من الأحيان، ستتمكن من عرض المزيد من التأثيرات من خلال العناصر الزائفة التي تمثل العنصر الفرعي الأول للعنصر الأصلي (تم تعيينه ليكون العنصر الفرعي الأخير). بالإضافة إلى ذلك، يمكنك أيضًا استخدام :hover لإنتاج بعض التأثيرات التفاعلية المعقدة على النمط.