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

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

أرز. 1. نوع صور الخلفية حسب قيمة حجم الخلفية

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

في المثال 1 تم تعيينه صورة الخلفية، الذي يشغل نافذة المتصفح بأكملها. للقيام بذلك كان علي أن أسأل ارتفاع أتش تي أم ألوالجسم 100%.

مثال 1. صورة الخلفية

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

تتضمن الخلفية أيضًا تدرجًا، والذي يمكن أيضًا تغيير حجمه، وبالتالي الحصول على مجموعة متنوعة من التأثيرات. على سبيل المثال، إضافة حجم الخلفية إلى الخطي التدرج، سنجعلها تتكرر، مما يشكل خطوط متدرجة متناوبة (المثال 2).

مثال 2. خطوط عمودية

وتظهر نتيجة المثال في الشكل. 2.

أرز. 2. خطوط متدرجة عمودية

يمكن عمل الخطوط الرأسية والأفقية ليس فقط متدرجة، ولكن أيضًا بحواف واضحة. للقيام بذلك، تحتاج إلى تحديد أربعة ألوان في معلمات التدرج - من 0 إلى 50% لون الشريط الأول ومن 50% إلى 100% لون الشريط الثاني. اللون الأول بنسبة 0% و اللون الأخيرليس عليك أن تكتب 100%؛ تتم إضافتها تلقائيًا بواسطة المتصفح، لذلك سنقتصر على قيمتين فقط. يوضح المثال 3 كيفية الإنشاء خطوط أفقيةارتفاع 50 بكسل.

مثال 3: خطوط أفقية

HTML5 CSS3 IE 10+ Cr Op Sa Fx

نتيجة هذا المثاليظهر في الشكل. 3.

أرز. 3. خطوط أفقية

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

مثال 4. تدرجان

HTML5 CSS3 IE Cr Op Sa Fx

وتظهر نتيجة هذا المثال في الشكل. 4.

أرز. 4. الخلايا

يتيح لك الجمع بين خاصية التدرج وحجم الخلفية الحصول على مجموعة واسعة من عمليات تعبئة الخلفية التي تم إنشاؤها دون استخدام صور الخلفية.

من المؤلف:في هذا البرنامج التعليمي سوف ننظر تقنية بسيطةإنشاء صورة خلفية تمتد بالكامل عبر عرض إطار عرض المتصفح بالكامل. للقيام بذلك، نحتاج إلى خاصية CSS بحجم الخلفية؛ لا حاجة لجافا سكريبت.

أمثلة على صور الخلفية ذات الأعداد الصحيحة المستجيبة

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

إذا كنت ترغب في تحقيق نتيجة مماثلة في مشروع الويب التالي الخاص بك، فهذه المقالة هي ما تحتاجه.

المبادئ الأساسية

هنا خطة عملنا.

استخدم خاصية حجم الخلفية لملء إطار العرض بالكامل

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

استخدم استعلام الوسائط للتعامل مع صور الخلفية الصغيرة للأجهزة المحمولة

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

تبلغ دقة الصورة التي استخدمتها في العرض التوضيحي 5500 × 3600 بكسل. هذه الدقة كافية لمعظم الشاشات العريضة شاشات الكمبيوتر، متاحة للبيع حاليا. ولكن لهذا سيتعين عليك معالجة ملف بحجم 1.7 ميجابايت.

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

لغة البرمجة

كل ما تحتاجه للترميز هو هذا:

سنقوم بتعيين صورة خلفية لعنصر النص بحيث تملأ الصورة دائمًا إطار عرض المتصفح بالكامل.

ومع ذلك، فإن هذه التقنية ستعمل أيضًا مع أي شخص عنصر الكتلة(على سبيل المثال div أو النموذج). إذا كان عرض وارتفاع عنصر الكتلة الخاص بك سلسًا، فسيتم دائمًا تغيير حجم صورة الخلفية لملء الحاوية بأكملها.

CSS

قم بتعيين الأنماط التالية لعنصر الجسم:

الجسم ( /* المسار إلى الصورة */ صورة الخلفية: url(images/background-photo.jpg); /* يتم دائمًا توسيط صورة الخلفية رأسيًا وأفقيًا */ موقف الخلفية: مركز المركز; /* صورة الخلفية غير متكرر * / تكرار الخلفية: عدم التكرار /* يتم تثبيت صورة الخلفية في إطار العرض، لذلك لا تتحرك عندما يكون ارتفاع المحتوى أكبر من ارتفاع الصورة */ مرفق الخلفية: ثابت /* هذا هو ما يسمح لصورة الخلفية بالتكيف مع حجم الحاوية */ حجم الخلفية: الغلاف /* مجموعات لون الخلفية، والتي سيتم عرضها أثناء تحميل صورة الخلفية */ لون الخلفية: #464646; )

جسم ( /* مسار الصورة */ الخلفية - الصورة: عنوان url (الصور / الخلفية - الصورة . jpg)؛ /* يتم دائمًا توسيط صورة الخلفية عموديًا وأفقيًا */ /* صورة الخلفية غير مكررة */ الخلفية - كرر: لا - تكرار؛ /* يتم تثبيت صورة الخلفية في إطار العرض بحيث لا تتحرك عندما يكون ارتفاع المحتوى أكبر من ارتفاع الصورة */ /* هذا هو ما يسمح لصورة الخلفية بالتكيف مع حجم الحاوية */ حجم الخلفية: الغلاف؛ /* يضبط لون الخلفية التي سيتم عرضها أثناء تحميل صورة الخلفية */ الخلفية - اللون : #464646;

معظم زوجان مهمانالخاصية/القيمة التي يجب الانتباه إليها:

حجم الخلفية: الغلاف؛

حجم الخلفية: الغلاف؛

هذا هو المكان الذي يبدأ فيه السحر. يخبر زوج الخاصية/القيمة هذا المتصفح بتحجيم صورة الخلفية بشكل متناسب، أي. بحيث يكون عرضه وارتفاعه مساويًا أو أكبر من عرض/ارتفاع العنصر (في حالتنا، عنصر الجسم).

ومع ذلك، هناك مشكلة واحدة مع زوج الخاصية/القيمة هذا: إذا كانت صورة الخلفية أحجام أصغرعنصر الجسم - ماذا سيحدث على الشاشات عالية الدقة و/أو عندما يكون لديك كمية كبيرةالمحتوى الموجود على الصفحة - سيقوم المتصفح حتماً بتكبير الصورة. وكما نعلم عندما نزيد الأحجام صورة نقطية، تنخفض جودة الصورة (وبعبارة أخرى، يحدث البيكسل).

زيادة حجم الصورة نسبة إلى الأحجام الأصليةيؤثر على جودة الصورة. ضع ذلك في الاعتبار عند اختيار الصورة الصحيحة. يستخدم العرض التوضيحي صورة ضخمة بحجم 5500 × 3600 بكسل شاشات عريضة، لذلك سوف يستغرق الأمر الكثير شاشة كبيرةبحيث يحدث تشويه الجودة. هيا لنذهب. للتأكد من أن صورة الخلفية تتمركز دائمًا في إطار العرض، سنكتب:

موضع الخلفية: مركز المركز؛

الخلفية - الموضع : المركز المركزي ;

يضع هذا الإدخال الخلفية على المحور الإحداثي في ​​وسط إطار العرض. نحتاج بعد ذلك إلى تحديد ما يحدث عندما يتجاوز ارتفاع المحتوى الارتفاع المرئي لإطار العرض. عندما يحدث هذا، يظهر شريط التمرير.

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

مرفق الخلفية: ثابت؛

الخلفية - المرفق: ثابت؛

في العرض التوضيحي، أضفت خيار "تحميل المحتوى" حتى تتمكن من رؤية ما يحدث عندما يظهر شريط التمرير في المتصفح عند ضبط خاصية مرفق الخلفية على الوضع الثابت. يمكنك أيضًا تنزيل العرض التوضيحي والتلاعب بقيم خاصية تحديد الموضع (مثل مرفق الخلفية وموضع الخلفية) لمعرفة مدى تأثيرها على تمرير الصفحة وصورة الخلفية. بقية قيم الخاصية واضحة بذاتها.

اختصار CSS

لقد قمت بتفصيل خصائص الخلفية لتسهيل شرحها. سيكون النموذج المختصر معادلاً أيضًا:

الجسم (الخلفية: url(background-photo.jpg) غطاء مركزي ثابت بدون تكرار؛)

جسم ( الخلفية: عنوان url (خلفية - صورة . jpg) غطاء مركزي مركزي بدون تكرار ثابت؛

كل ما عليك فعله هو تغيير قيمة عنوان url للإشارة إلى صورة الخلفية الخاصة بك.

اختياري: استعلام الوسائط للشاشات الصغيرة

للشاشات الصغيرة اعتدت برنامج فوتوشوبلتصغير حجم صورة الخلفية الأصلية بشكل متناسب إلى 768 × 505 بكسل، واستخدمت أيضًا Smush.it لتقليل الحجم أكثر قليلاً. وبفضل هذا، انخفض حجم الملف من 1741 كيلو بايت إلى 114 كيلو بايت. أولئك. تم تقليل حجم الصورة بنسبة 93%.

من فضلك لا تفهمني بشكل خاطئ، 114 كيلو بايت لا تزال كبيرة جدًا بالنسبة لعنصر التصميم الجمالي البحت. بالنظر إلى الحمل الإضافي البالغ 114 كيلو بايت، لن أستخدم مثل هذا الملف إلا إذا رأيت فرصة لتحسين تجربة المستخدم (UX) للموقع بشكل كبير، لأن... الخامس حالياًتأتي حصة كبيرة من حركة المرور على الإنترنت من الأجهزة المحمولة image: url (images/background-photo-mobile-devices.jpg);

يحتوي استعلام الوسائط على حد عرض يبلغ الحد الأقصى للعرض: 767 بكسل، مما يعني أنه إذا كان إطار عرض المتصفح أكبر من 767 بكسل، فسيتم تحميل صورة خلفية كبيرة.

الجانب السلبي لاستخدام استعلام الوسائط هذا هو أنه إذا قمت بتغيير عرض نافذة المتصفح الخاص بك من، على سبيل المثال، 1200 بكسل إلى 640 بكسل (أو العكس)، فسترى على الفور لحظة تحميل صورة خلفية صغيرة أو كبيرة.

بالإضافة إلى ذلك، بسبب إمكانية عرض بعض الأجهزة ذات الشاشات الصغيرة كمية كبيرةبكسل – على سبيل المثال، iPhone 5 c عرض شبكية العينقادر على عرض دقة تبلغ 1136 × 640 بكسل - سيتم تقسيم صورة الخلفية الصغيرة إلى وحدات بكسل.

تلخيص

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

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

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

أرز. 1. نوع صور الخلفية حسب قيمة حجم الخلفية

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

يقوم المثال 1 بتعيين صورة خلفية تشغل نافذة المتصفح بأكملها.

مثال 1. صورة الخلفية

وتظهر نتيجة هذا المثال في الشكل. 2. عندما تقوم بتغيير حجم النافذة، ستكبر الصورة أو تتقلص لتملأ صفحة الويب بأكملها.

واحدة من المهام الرئيسية عندما تخطيط التكيف- هذا هو تغيير حجم الصور (بما في ذلك صور الخلفية) بحيث يتم عرضها بشكل صحيح على الأجهزة ذات دقة الشاشة المختلفة.

مع الصور في العلامة imgالأمر بسيط: عندما تقوم بتعيين العرض كنسبة مئوية، سيتم تغيير حجم الارتفاع تلقائيًا. لا يمكن تطبيق هذه الطريقة على صور الخلفية.

هذه الخدعة هي تعيين قيمة النسبة المئوية للحشو ( حشوة) عنصر. تم نشر هذه الطريقة لأول مرة في مقالة قديمة على مدونة A List Apart، لكنها لا تزال تعمل بشكل جيد.

لنفترض أن لديك صورة خلفية مقاس 800 × 450 بكسل، وتريد أن تجعلها خلفية بنسبة عرض إلى ارتفاع ثابتة تبلغ 16:9. يستخدم الرمز أدناه للمسافة البادئة بكسل، ولكن كل شيء سوف يعمل مع م. يوجد أيضًا عنصر شكل HTML5 لـ العملية الصحيحةفي المتصفحات القديمة يمكنك استخدام HTML5 shiv.

Div.column ( الحد الأقصى للعرض: 800 بكسل؛ ) الشكل. النسبة الثابتة ( المساحة المتروكة في الأعلى: 56.25%؛ /* 450 بكسل/800 بكسل = 0.5625 */ )

إضافة خلفية

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

Div.column ( /* يجب أن يكون عرض صورة الخلفية 800 بكسل */ الحد الأقصى للعرض: 800 بكسل; ) الشكل.النسبة الثابتة ( المساحة العلوية: 56.25%; /* 450 بكسل/800 بكسل = 0.5625 */ صورة الخلفية: url(http: //voormedia.com/examples/north-sea-regatta.jpg); حجم الخلفية: الغلاف; -moz-background-size: الغلاف;

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

على سبيل المثال، صورة بعرض 800 × 200 بكسل (4:1). الشاشة الصغيرة، بعرض 300 بكسل، يجب تقليله إلى 150 بكسل (2:1). دعونا نحسب الصفات ارتفاعو أعلى الحشو:

يوضح الشكل نسبة العرض إلى الارتفاع لصورة الخلفية بعروض مختلفة. يتوافق ميل الرسم البياني مع السمة أعلى الحشو، بداية الارتفاع - للسمة ارتفاع. الكود الناتج هو:

Div.column ( /* يجب أن يكون عرض صورة الخلفية 800 بكسل */ الحد الأقصى للعرض: 800 بكسل; ) الشكل.fluidratio ( المساحة العلوية: 10%; /* المنحدر */ الارتفاع: 120 بكسل; /* ارتفاع البداية */ الخلفية- الصورة: url(http://voormedia.com/examples/amsterdam.jpg); /8 */ )

استخدام SCSS للحساب

صفات أعلى الحشوو ارتفاعيمكن حسابها تلقائيًا باستخدام المعالجات المسبقة مثل SCSS. مثال على ذلك:

/* حساب نسبة السوائل بناءً على بعدين (العرض/الارتفاع) */ @mixin Fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -صغير: nth($small-size, 1); $height-large: nth($large-size, 2); / ($width-large - $width-small)؛ $height: $width-small * $slope * 100%؛ ; /* Firefox 3.6 */ الخلفية: center; /* Internet Explorer 7/8 */ ) الشكل.fluidratio ( /* سيكون لهذا العنصر نسبة سلاسة من 4:1 عند 800 بكسل إلى 2:1 عند 300 بكسل. */ @ تضمين نسبة السوائل (800 بكسل 200 بكسل، 300 بكسل 150 بكسل)؛ صورة الخلفية: url(http://voormedia.com/examples/amsterdam.jpg);

تقنيات الويب، مثل اتجاهات التصميم المختلفة، لا تقف مكتوفة الأيدي، لذلك في كل مرة تظهر بعض الميزات الأصلية والفروق الدقيقة لمواقع الويب. أحد هذه "الاتجاهات" هو استخدام الخلفية (backgorund)، والتي تمتد عبر الشاشة بأكملها في العرض والارتفاع. لقد قلت شيئًا ما منذ عام تقريبًا أو أكثر - تم وضع الصورة في رأس المدونة وتم "انتقالها" بسلاسة إلى لون الخلفية الرئيسي لصفحة الويب. إذا كنت ترغب في ذلك، يمكنك حتى إضافة .

يعد وضع صورة كبيرة قابلة للتطوير كخلفية أمرًا جديدًا وأكثر تعقيدًا، وقد وجدت الحل له في هذه المقالة.

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

• ملء الصفحة بأكملها بصورة واحدة بدون مسافات؛
• تغيير حجم الصورة إذا لزم الأمر (تقليص نافذة المتصفح)؛
• الحفاظ على نسب الصورة.
• وضع الصورة في وسط الصفحة؛
• عدم وجود أشرطة التمرير على الصفحة؛
• حل عبر المتصفحات مناسب لمتصفحات مختلفة؛
• التنفيذ دون أي تقنيات خارجية مثل الفلاش.

لذلك، هناك العديد من الحلول المناسبة لخلفية موقع الويب بملء الشاشة.

حل رائع وبسيط وتقدمي باستخدام CSS3

لإنجاز هذه المهمة، يمكننا استخدام خاصية حجم الخلفية في CSS3. سوف نستخدم عنصر html أفضل من body. دعونا نضبط الخلفية لتكون ثابتة ومركزة، ثم نستخدم غطاء القيمة في حجم الخلفية.

html (الخلفية: url (images/bg.jpg) مركز مركزي بدون تكرار ثابت؛ -webkit-background-size: الغلاف؛ -moz-background-size: الغلاف؛ -o-background-size: الغلاف؛ حجم الخلفية: غطاء)

html (الخلفية: url(images/bg.jpg) مركز مركزي بدون تكرار ثابت؛ -webkit-background-size: الغلاف؛ -moz-background-size: الغلاف؛ -o-background-size: الغلاف؛ حجم الخلفية: غطاء)

الحل مدعوم من قبل جميع الحلول الشائعة على الشبكة تقريبًا:

• Firefox 3.6+ (يدعم Firefox 4 الإصدار غير البادئ من البائع)
• Opera 10+ (يدعم Opera 9.5 حجم الخلفية ولكن بدون قيمة الغلاف)
• كروم أيا كان +
• آي إي 9+
• سفاري 3+

وجد أحد Goltzman حلاً يسمح للاختراق بالعمل في IE

عامل التصفية: progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -مرشح مللي: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg"، sizingMethod="scale")";

عامل التصفية: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = ".myBackground.jpg"، sizingMethod = "scale")؛ -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale"");

ولكن الاهتمام!!! وهذا قد يسبب بعض المشاكل مع الروابط الموجودة على الصفحة. بالمناسبة، أضاف مات ليثرلاند بعد ذلك بقليل أن الكود، من حيث المبدأ، يمكن استخدامه ولكن لا يمكن استخدامه لهذا الغرض عناصر أتش تي أم ألأو الجسم، لكنك تحتاج إلى تنفيذ كل شيء من خلال div بارتفاع وعرض 100%.

CSS- الاختراق رقم 1

تم تقديم نسخة بديلة بواسطة دوج ناينر. في هذه الحالة، يتم استخدام عنصر مضمن في الصفحة والتي يمكن تغيير حجمها في أي متصفح. قمنا بتعيين قيمة الحد الأدنى للارتفاع، والتي تملأ نافذة المتصفح عموديًا، وقمنا بتعيين العرض على 100٪، مما يملأ الصفحة أفقيًا. قمنا أيضًا بتعيين الحد الأدنى للعرض بحيث لا تكون الصورة أصغر مما هي عليه بالفعل.

img.bg ( /* تعيين القواعد لملء الخلفية */الحد الأدنى للارتفاع: 100%؛ الحد الأدنى للعرض: 1024 بكسل؛ /* إعداد القياس المتناسب */العرض: 100%؛ الارتفاع: تلقائي؛ /* إعداد الموضع */ الموضع : ثابت ; أعلى: 0؛ اليسار: 0؛ ) شاشة الوسائط و (أقصى عرض: 1024 بكسل) ( /* خاص بهذه الصورة بالتحديد */ img.bg ( اليسار : 50% ; الهامش الأيسر : -512 بكسل ; /* 50% */ ) )

img.bg ( /* تعيين القواعد لملء الخلفية */ min-height: 100%; min-width: 1024px; /* إعداد القياس المتناسب */ width: 100%; height: auto; /* إعداد الموضع */ الموضع: الجزء العلوي الثابت: 0؛ اليسار: 0) شاشة الوسائط و(الحد الأقصى للعرض: 1024 بكسل) ( /* خاص بهذه الصورة تحديدًا */ img.bg ( اليسار: 50%; هامش اليسار: -512 بكسل; / * 50% */ ) )

يعمل في أي إصدار متصفحات الجودة- سفاري/أوبرا/فايرفوكس وكروم. كما هو الحال دائمًا، لدى IE فروق دقيقة خاصة به:

• آي إي 9 - يعمل؛
• IE 7/8 - يعمل في أغلب الأحيان بشكل صحيح، لكنه لا يقوم بتوسيط الصور الأصغر من نافذة المتصفح؛
• IE 6 - يمكن تخصيصه، ولكن من يحتاج إلى هذا المتصفح على أي حال.

CSS- خيار الاختراق 2

خيار آخر لحل المشكلة مع باستخدام CSSالأنماط هي وضع صورة سطرية على الصفحة بموضع ثابت على اليسار الزاوية العليا، ثم قم بتعيين الحد الأدنى للعرض والحد الأدنى للارتفاع على 100% مع الحفاظ على النسب.

#bg (الموضع: ثابت؛ الأعلى: -50%؛ اليسار: -50%؛ العرض: 200%؛ الارتفاع: 200%؛) #bg img (الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ اليمين: 0؛) أسفل: 0؛ الهامش: تلقائي؛ الحد الأدنى للعرض: 50%؛

#bg ( الموضع: ثابت؛ أعلى: -50%؛ يسار: -50%؛ عرض: 200%؛ ارتفاع: 200%؛ ) #bg img ( موضع: مطلق؛ أعلى: 0؛ يسار: 0؛ يمين: 0؛ أسفل: 0؛ الهامش: تلقائي؛ الحد الأدنى للعرض: 50%؛

الاختراق يعمل في :

• Safari / Chrome / Firefox (أيضًا الإصدارات المبكرةلم يتم اختباره، ولكنه يعمل بشكل جيد في أحدث منها)
• آي إي 8+
• Opera (أي إصدار) ومع IE كلاهما به أخطاء بنفس الطريقة مع وجود خطأ في تحديد الموقع.

الطريقة مع jQuery

يكون هذا الخيار أسهل بكثير (من وجهة نظر CSS) إذا علمنا أن نسبة العرض إلى الارتفاع للصورة (الصورة المستخدمة كخلفية) أكبر أو أصغر من نسبة العرض إلى الارتفاع الحالية لنافذة المتصفح. إذا كان أقل، فيمكننا فقط استخدام العرض = 100% وسيتم ملء النافذة بالتساوي في العرض والارتفاع. إذا كان أكثر من ذلك، يمكنك فقط تحديد الارتفاع = 100% لملء النافذة بأكملها.

يتم الوصول إلى جميع البيانات من خلال JavaScript، والرموز المستخدمة هي كما يلي:

#bg ( الموضع : ثابت ; الأعلى : 0 ; اليسار : 0 ; ) .bgwidth ( العرض : 100% ; ) .bgheight ( الارتفاع : 100% ; )

#bg ( الموضع: ثابت; أعلى: 0; يسار: 0; ) .bgwidth ( العرض: 100%; ) .bgheight ( الارتفاع: 100%; )

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg"), AspectRatio = $bg.width() / $bg.height(); وظيفة تغيير حجمBg() (إذا ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

في رأيي، لا يتم تنفيذ التمركز في هذه الحالة (بقدر ما أفهم)، ولكن يمكن القيام به. يتم دعم معظم متصفحات سطح المكتب، بما في ذلك IE7+. أخيرًا، قام مؤلف المقال حول الاختراقات بإعداد مجموعة من ملفات الأمثلة التي يتم فيها تنفيذ كل هذا - يمكنك تنزيلها. تحتوي التعليقات على المقالة الأصلية أيضًا على بعض المعلومات والمناقشات، على الرغم من أن معظمها تفاصيل مهمةأضاف المؤلف في شكل قوائم إلى المنشور، وقد قمت بترجمتها والإشارة إليها أيضًا. وبطبيعة الحال، سوف تساعدك الأمثلة على فهم كل هذا. بشكل عام، لولا "الكمامات" المستمرة من IE7، لكانت جميع الاختراقات المذكورة مثالية.

ملاحظة. هل تريد شراء كتاب؟ - ليس عليك الذهاب إلى المتجر لأن متجر الكتب عبر الإنترنت يتيح لك الآن القيام بكل شيء عبر الإنترنت - اختر خدمة التوصيل إلى المنزل وادفعها ورتبها.