دعونا نتحدث عن الأساسيات دون الإسهاب في بعض الأحيان، قد تواجه الواجهة الأمامية الحاجة إلى تعتيم الخلفية ولكنها تتطلب محتوى واضحًا، فلنلقي نظرة على التأثير أولاً:
فيما يلي التنفيذ المحدد:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>طمس الخلفية</title></head><body> <div class=main><!-- ما يلي الخلفية غير واضحة والمحتوى الآخر واضح--><!-- طبقة المحتوى--> <div class=banner> <div class=banner-contain> <h1>أنا المحتوى</h1> </div> <!-- طبقة الخلفية-> <div class=banner-bg></div> </div> </div> <style> .main{ width: 100% } .banner{ width: 100%position; .banner-bg{ width: 100%;/*العرض يملأ الشاشة*/ padding-top: 52.734%;/*يتم تقسيم ارتفاع الصورة على العرض للحصول على هذه القيمة*/ الخلفية: url(test.jpg)مركز المركز بدون تكرار;/*المركزان محاذاة أفقيًا وعموديًا على التوالي*/ حجم الخلفية: 100%;/*الخلفية منتشرة أفقيًا*/ filter:blur(10px); قيمة التمويه، كلما كانت أكبر، أصبحت ضبابية*/ } .banner-contain{position: مطلق;/*ضبط الموضع المطلق لطبقة المحتوى*/ width: 100% text-align: center z-index; : 6;/*إحضار المحتوى إلى الأعلى*/ هامش أعلى: 6% } </style></body></html> 1. التنفيذ التكيفي:قم بتعيين المساحة المتروكة لعلامة div على نسبة مئوية. يتم حساب قيم النسبة المئوية للمساحة والهامش بناءً على العرض بدلاً من ارتفاع الشاشة، بحيث يمكنك تعيين منطقة قابلة للتكيف وفقًا لذلك، على سبيل المثال، معلومات الصورة يتبع
ثم تكون نسبة الارتفاع إلى العرض: 540/1024، أي حوالي 52.734%، أي أن الارتفاع هو 52.734% من العرض. هنا يتم ضبط العرض على 100%، ثم يتم padding-top من العرض 52.734%*100%
قم بإعداد طبقتين، إحداهما هي طبقة تمويه الخلفية، وتدعم بشكل تكيفي حاوية div الخارجية بأكملها، وتقوم بتعيين قيمة التمويه من خلال filter:blur() ، والأخرى هي طبقة المحتوى، وتحديد الموضع المطلق، وتعيين مؤشر z لزيادة طبقة المحتوى يتم منع الطبقات من الحجب حتى لا تتأثر طبقة المحتوى بالتعتيم
ما ورد أعلاه هو نموذج التعليمات البرمجية الذي يقدمه لك المحرر على الواجهة الأمامية لتحقيق ضبابية في الخلفية ولكن بمحتوى واضح وقابل للتكيف وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وللمحرر سوف الرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!