كيفية تغيير حجم صورة الخلفية باستخدام HTML Stretch وCSS

هل تريد أن تعرف كيفية تغيير حجم صورة الخلفية مع HTML تمتد وCSS؟ توفر هذه المقالة رموز HTML للسماح لك بتوسيع صورة الخلفية.

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

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

في المثال التالي، نستخدم تقديم خلفية الحجم بقيمة 100% 100%، أي أنه بنفس حجم العنصر، بغض النظر عن حجم الصورة الفعلية.

قد تكون مهتمًا أيضًا بالقراءة عن: كيفية تحرير HTML على تمبلر. 4 طرق للقيام بذلك

محرر المكدس محرر تفكيك

<أتش تي أم أل>

<الرأس>

<العنوان> مثال

​

<نمط النوع = "نص/CSS">

.خلفية {

حجم الصندوق: صندوق الحدود؛

العرض: 100%؛

الارتفاع: 150 بكسل؛

الحشو: 3 بكسل؛

صورة الخلفية: عنوان url ( /pix/samples/bg1.gif );

الحدود: 1 بكسل أسود خالص؛

حجم الخلفية: 100% 100%؛

}

​

<الجسم>

​

<div class = «الخلفية» >

القاع ممتد…

<p>وهذه هي الصورة بحجمها الأصلي:

< img src = "/pix/samples/bg1.gif" style = "border: 1px Solid black;" >

قم بتوسيع حجم صورة الخلفية باستخدام HTML للصفحة بأكملها

يستخدم المثال أعلاه صورة خلفية مطبقة على ملف <div> عنصر. يمكنك أيضًا تطبيقه ضد  العنصر، مما يؤدي إلى تمديد الصورة لملء الصفحة بأكملها.

محرر المكدس محرر تفكيك

<أتش تي أم أل>

<الرأس>

<العنوان> مثال

​

<نمط النوع = "نص/CSS">

أتش تي أم أل,

جسم {

الارتفاع: 100%؛

}

​

جسم {

صورة الخلفية: عنوان url ( /pix/samples/bg1.gif );

تكرار الخلفية: عدم التكرار؛

حجم الخلفية: 100% 100%؛

}

​

<الجسم>

​

< p > تحتوي هذه الصفحة على صورة خلفية ممتدة...

​

<p>وهذه هي الصورة بحجمها الأصلي:

< img src = "/pix/samples/bg1.gif" style = "border: 1px Solid black;" >

قد تحتاج إلى تعيين خاصية العناصر وفي. الارتفاع100%

قم بزيادة حجم صورة الخلفية باستخدام HTML، دون "تمديد" الصورة بشكل غير متناسب

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

قم بزيادة حجم صورة الخلفية باستخدام HTML باستخدام حجم الخلفية: الغلاف

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

سيضمن استخدام هذا الخيار عدم تمديد الصورة بشكل غير متناسب. يجب أن تضع في اعتبارك أن بعض أجزاء الصورة قد تكون مخفية إذا كان العنصر بنسب مختلفة عن صورة الخلفية الخاصة بك.

محرر المكدس محرر تفكيك

<أتش تي أم أل>

<الرأس>

<العنوان> مثال

​

<نمط النوع = "نص/CSS">

أتش تي أم أل,

جسم {

الارتفاع: 100%؛

}

​

جسم {

صورة الخلفية: عنوان url ( /pix/samples/bg1.gif );

تكرار الخلفية: عدم التكرار؛

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

}

​

<الجسم>

​

< p > تحتوي هذه الصفحة على صورة خلفية ممتدة...

​

<p>وهذه هي الصورة بحجمها الأصلي:

< img src = "/pix/samples/bg1.gif" style = "border: 1px Solid black;" >

قم بزيادة حجم صورة الخلفية باستخدام HTML باستخدام حجم الخلفية: يحتوي على

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

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

محرر المكدس محرر تفكيك

<أتش تي أم أل>

<الرأس>

<العنوان> مثال

​

<نمط النوع = "نص/CSS">

أتش تي أم أل,

جسم {

الارتفاع: 100%؛

}

​

جسم {

صورة الخلفية: عنوان url ( /pix/samples/bg1.gif );

تكرار الخلفية: عدم التكرار؛

حجم الخلفية: تحتوي على؛

}

​

<الجسم>

​

< p > تحتوي هذه الصفحة على صورة خلفية ممتدة...

​

<p>وهذه هي الصورة بحجمها الأصلي:

< img src = "/pix/samples/bg1.gif" style = "border: 1px Solid black;" >

استخدم طبقات CSS لتغيير حجم صورة الخلفية باستخدام HTML

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

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

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

خصائص تغيير حجم صورة الخلفية باستخدام HTML وCSS

الآن، دعونا نلقي نظرة على بعض الأمثلة على خصائص تغيير حجم صورة الخلفية باستخدام HTML وCSS:

مثال

هنا يمكنك تحديد حجم صورة الخلفية باستخدام «السيارات» وبالبكسل:

#مثال 1 {
الخلفية: URL(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: النفس؛
}

#مثال 2 {
الخلفية: URL(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: 300 بكسل 100 بكسل؛
}

الآن، دعونا نلقي نظرة على المزيد من أمثلة الاختبار لتجربتها بنفسك أدناه.

تحديد واستخدام تغيير حجم صورة الخلفية باستخدام HTML

تحدد خاصية حجم الخلفية حجم صور الخلفية.

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

القيمة الافتراضية:	السيارات
موروثة:	لا
متحرك:	نعم.
الإصدار:	CSS3
بناء جملة جافا سكريبت:	موضوع .style.backgroundSize = "60 بكسل 120 بكسل"

دعم المتصفح

تحدد الأرقام الموجودة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بشكل كامل.

الأرقام تليها -webkit- أو -moz- أو -o- تحديد الإصدار الأول الذي يعمل ببادئة.

الممتلكات
خلفية الحجم	4.0 1.0 -ويبكيت-	9.0	4.0 3.6 -موز-	4.1 3.0 -ويبكيت-	10.5 10.0 -س-

بناء جملة CSS لتغيير حجم صورة الخلفية باستخدام HTML

حجم الخلفية: تلقائي | الطول | الغلاف | تحتوي على | الأولي|ورث؛

قيم الممتلكات

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

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

الآن، لتوضيح المعلمات، نترك لك المزيد من الأمثلة لتغيير حجم صورة الخلفية مع HTML:

مثال 1

يحدد حجم صورة الخلفية بالنسبة المئوية:

#مثال 1 {
الخلفية: URL(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: 100% 100%؛
}

#مثال 2 {
الخلفية: URL(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: 75% 50%؛
}

مثال 2

يحدد حجم صورة الخلفية مع "الغلاف":

#مثال 1{
الخلفية: URL(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: الغلاف؛
}

مثال 3

يحدد حجم صورة الخلفية باستخدام "يحتوي على":

#مثال 1 {
الخلفية: URL(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: تحتوي على؛
}

مثال 4

هنا لدينا صورتان للخلفية. نحدد حجم صورة الخلفية الأولى بـ "تحتوي" وصورة الخلفية الثانية بـ "غلاف":

#مثال 1 {
الخلفية: url(img_tree.gif), url(mountain.jpg);
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: يحتوي على، غطاء؛
}

مثال 5

استخدم خصائص خلفية مختلفة لإنشاء صورة "بطلة":

صورة البطل {

 صورة الخلفية: url(«photographer.jpg»); /*الصورة المستخدمة*/

 لون الخلفية: #cccccc؛ /* استخدمه إذا كانت الصورة غير متوفرة */

 الارتفاع: 500 بكسل؛ /* يجب عليك ضبط ارتفاع محدد */

 موقف الخلفية: المركز؛ /* توسيط الصورة */

 تكرار الخلفية: عدم التكرار؛ /* لا تكرر الصورة */

 حجم الخلفية: الغلاف؛ /* تغيير حجم صورة الخلفية لتغطية الحاوية بأكملها */
}

كيفية تمديد حجم صورة الخلفية باستخدام HTML لتناسب صفحة الويب

يشرح هذا الجزء من المقالة طريقتين لتوسيع صورة الخلفية لتناسب صفحة الويب باستخدام CSS3.

1. الطريقة المفضلة: استخدم خاصية CSS3 ل خلفية الحجم وتعيينه على غطاء.
2. طريقة بديلة- استخدم خاصية CSS3 لتعيين حجم الخلفية en 100% y موقف القاع في

الطريقة الأولى: الطريقة الحديثة

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

أفضل طريقة لتمديد الصورة لتناسب خلفية عنصر ما هي استخدام خاصية CSS3 خلفية الحجم، وجعلها متساوية للتغطية.

div {

صورة الخلفية: url('background.jpg');

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

تكرار الخلفية: لا تكرار؛

}

شاهد هذا المثال عمليًا. هنا هو HTML في الصورة أدناه.

الآن، انظر إلى CSS. لا يختلف كثيرًا عن الكود السابق. وهناك بعض الإضافات لتوضيح ذلك.

والآن هذه هي النتيجة في كامل الشاشة.

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

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

الطريقة الثانية: المسار البديل

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

جسم {

الخلفية: URL('bgimage.jpg');

تكرار الخلفية: لا تكرار؛

حجم الخلفية: 100%؛

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

}

باستخدام المثال أعلاه مع ضبط حجم الخلفية على 100%، يمكنك أن ترى أن CSS يبدو متماثلًا إلى حد كبير.

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

من الواضح أنها ليست مثالية، لكنها ستعمل كبديل.

تعمل هذه الخاصية على آي إي 9+، فايرفوكس 4+، أوبرا 10.5+، سفاري 5+، كروم 10.5+ وعلى جميع متصفحات الجوال الرئيسية. وهذا يشمل جميع المتصفحات الحديثة المتاحة اليوم، مما يعني أنه يجب عليك استخدام هذه الخاصية دون خوف من أنها لن تعمل على شاشة شخص ما.

هنا يمكنك التعرف على: كيفية فتح ملفات HTML في جوجل كروم

اختتام

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