مرحبًا. اليوم سننظر في كيفية تمديد الخلفية باستخدام أدوات CSS (دون تدخل أدوات أخرى، مثل جافا سكريبت وغيرها مثلها).

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

الحل: كيفية تمديد الخلفية باستخدام أدوات CSS

يمكن أن تحتوي خاصية حجم الخلفية على قيم متعددة.
1) يمكن أن يكون هذا أحد التوجيهات: تغطية أو احتواء.

حجم الخلفية: تحتوي على؛ /* يقوم بقياس الصورة مع الحفاظ على التناسب بحيث يتم احتواء الصورة بأكملها داخل الكتلة. */ حجم الخلفية: الغلاف؛ /* يقوم بقياس الصورة مع الحفاظ على نسبة العرض إلى الارتفاع بحيث يكون عرضها أو ارتفاعها مساويًا لعرض أو ارتفاع الكتلة. */

2) يمكن أن تكون نسبة (100% أو 94% من عرض الحاوية). في هذه الحالة، يمكنك استخدام إما قيمة نسبة مئوية واحدة أو 2. إذا كانت هناك قيمتان، فسيتم قياس ارتفاع الصورة وعرضها في نفس الوقت، ويتم ضبط كل قيمة بما يتناسب مع النسب المئوية المحددة في حدود).

حجم الخلفية: 100%؛ /*يعادل توجيه الغلاف*/ حجم الخلفية: 100% 50%; /*العرض سيكون 100% من عرض الكتلة، ولكن الارتفاع سيكون 50% فقط، ومن المرجح أن تكون الصورة مشوهة*/

3) القيمة العددية المباشرة (بالبيسكل، السنتيمتر، em، إلخ). يمكن أن يكون هناك أيضًا معلمتان (أو 1)، كما في الحالة السابقة.
4) قيمة السيارات. يشير إلى أنه لن يتم تمديد الصورة، ولكن سيتم استخدام الحجم الأصلي. في هذه الحالة، يمكن أن يكون هناك أيضًا معلمتان أو معلمة واحدة، أي أنه يمكنك تحديد ما يلي:

حجم الخلفية: 60% تلقائي؛ /*عرض الصورة سيكون 60%، وارتفاعها يتناسب مع حجم الصورة الأصلية*/

أين سيعمل حل امتداد خلفية CSS؟

إذا حكمنا من خلال موقع "هل يمكنني استخدام"، فإنه سيعمل في كل شيء المتصفحات الحديثة، بما في ذلك إصدارات IE لا تقل عن 9. لذلك، من حيث المبدأ، لا يوجد سبب للقلق. انظر جدول التوافق:

وجدت هذا الدرس على واحد قناة يوتيوب. ميزة مفيدة جدًا لمصمم الويب في رأيي.

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

يجب أن يبدو مثل هذا:

دعونا نبدأ. افتح صورتنا في PhotoShop وحدد الكائن الذي نحتاجه:

بعد ذلك، انتقل إلى علامة التبويب التحديد >> حفظ التحديد

وقم بتعيين اسم عشوائي لهذا التحديد:

وبالتالي، أنشأنا منطقة سيتم حمايتها لاحقا من التغييرات. والخطوة التالية هي الذهاب إلى تحرير >> مقياس إدراك المحتوى:

وتأكد من الإشارة إلى الكائن المحمي:

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

تحيات. في هذه المقالة، أريد مشاركة ثلاث طرق لوضع صورة كخلفية لصفحة بأكملها باستخدام HTML + CSS فقط (بدون JS).

لذلك، متطلباتنا لصورة الخلفية هي كما يلي:

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

الطريقة 1

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

اضبط الخلفية لتكون ثابتة ومركزة، ثم اضبط حجمها باستخدام حجم الخلفية: الغلاف .

HTML (صورة الخلفية: url(images/background.jpg); تكرار الخلفية: عدم التكرار; موضع الخلفية: المركز المركزي; مرفق الخلفية: ثابت; -حجم خلفية webkit: الغلاف; -moz-background- الحجم: الغلاف - حجم الخلفية: حجم الخلفية: الغلاف ؛

تعمل هذه الطريقة في

Chrome (أي إصدار) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

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

الطريقة 2

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

إذا كان عرض النافذة أصغر من عرض الصورة، فسيتم استخدام استعلام الوسائط لتوسيط الخلفية.

img.background ( الحد الأدنى للارتفاع: 100%؛ الحد الأدنى للعرض: 640 بكسل؛ العرض: 100%؛ الارتفاع: تلقائي؛ الموضع: ثابت؛ الأعلى: 0؛ اليسار: 0؛ /* يعتمد على حجم الصورة */ @media screen و (الحد الأقصى للعرض: 640 بكسل)( img.bg ( اليسار: 50%; الهامش الأيسر: -320 بكسل; ) ) )

تعمل هذه الطريقة في:

• أي إصدار من المتصفحات الجيدة (Chrome، Opera، Firefox، Safari)
• آي إي 9+

الطريقة 3

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

صحيح، مع هذا النهج، لا يتم توسيط الصورة. ولكن يتم حل هذه المشكلة عن طريق التفاف الصورة