مقدمة

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

CSS لمساعدتنا

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

تعبئة اللون

لنبدأ بالأبسط - ملء بلون معين. للقيام بذلك ، نحتاج فقط إلى معرفة كود اللون وخاصية CSS ذات لون الخلفية.

الجسم (لون الخلفية: # 000 ؛ / * املأ الخلفية باللون الأسود * /)

سيعمل هذا الرمز على تعيين خلفية سوداء صلبة لموقعك. يمكن اختيار أي لون آخر كلون للخلفية عن طريق تغيير رمزه.

إذا كنت تقوم بتطبيق تعبئة خلفية على عنصر معين ، مثل العنوان (h1-h6) ، الفقرة (p) ، وما إلى ذلك ، فتأكد من أن لون النص لا يمتزج في الخلفية ويفقد إمكانية القراءة. استخدم خاصية اللون لتغيير لون النص.

P (لون الخلفية: # 000 ؛ / * ملء الخلفية باللون الأسود * / color: #fff ؛ / * نص أبيض للخلفية السوداء * /)

الصورة الخلفية

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

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

Body (background-image: url (/images/background.png) ؛ / * المسار المطلق إلى صورة الخلفية background.png * /)

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

Body (background-image: url (/images/background.png) ؛ / * المسار المطلق إلى صورة الخلفية background.png * / background-color: # ab11cf ؛ / * املأ الخلفية بلون معين * /)

يمكن دمج هاتين الخاصيتين من المثال أعلاه في خاصية واحدة باستخدام خاصية background global.

Body (background: # ab11cf url (/images/background.png) ؛ / * لون التعبئة ومسار صورة الخلفية * /)

خاصية الخلفية

تتيح لك خاصية الخلفية العالمية ضبط جميع خيارات العرض لصورة الخلفية في سطر واحد. دعنا نلقي نظرة على الخيارات المتاحة.

الخلفية: | يرث

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

مرفق الخلفية

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

Body (background-image: url (/images/background.png) ؛ / * المسار المطلق إلى صورة الخلفية background.png * / background-attachment: Fixed ؛ / * الصورة ثابتة * / background-color: # ab11cf ؛ / * ملء الخلفية بلون معين * /)

مقابل:

Body (background: # ab11cf url (/images/background.png) ثابت ؛ / * لون التعبئة ومسار صورة الخلفية الثابت * /)

موقف الخلفية

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

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

يحدد كيفية تكرار صورة الخلفية. يمكن تكراره أفقيًا فقط (تكرار x) ، أو عموديًا فقط (تكرار y) ، أو كليهما أفقيًا وعموديًا (تكرار) ، أو بدون تكرار على الإطلاق (بدون تكرار). القيمة الافتراضية هي التكرار.

يرث

يستخدم لتحديد وراثة الخصائص من العنصر الرئيسي بشكل صريح.

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

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

الأدوات الأساسية لتعيين خلفية صفحات الويب

لتعيين صورة الخلفية ، قدم مصممو لغة الويب سمة الخلفية. كان متوفرا في كل من و css.

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

لذلك ، لضبط صورة الخلفية عبر وحدة html فقط اكتب هذا الرمز: ...

وبدلاً من الكلمات "عنوان الملف" ، أدخل المسار إلى الصورة.

ومع ذلك ، لاحظ! إذا كنت تريد رؤية لوحة قماشية ذات لون واحد كخلفية ، محددة بقيمة من لوحة الألوان ، فسيتم ذلك باستخدام سمة bgcolor.

على سبيل المثال، ...

، لقد وضعنا خلفية سوداء لموقعنا.

يتم تحديد الألوان في css و html إما عن طريق كلمة إنجليزية (على سبيل المثال ، أحمر) أو رمز خاص يتكون من علامة # وستة أحرف بعدها (على سبيل المثال ، # FFDAB9).

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

الخلفية كخاصية في أوراق الأنماط المتتالية

يتم تعيينه إما في ملف منفصل باستخدام أنماط css ، أو في عنصر

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

مع خالص التقدير ، رومان تشويشوف

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

عمل خلفية جديدة لمواقع الويب

لإكمال المهمة ، يمكنك استخدام إحدى الطرق الأربع:

• 1. خلفية بلون واحد
• 2. الخلفية مع الملمس
• 3. الخلفية مع التدرج
• 4. خلفية مع صورة كبيرة

قم بإنشاء خلفية بلون واحد

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

لون الخلفية: # 83C5E9 ؛ (خلفية زرقاء كما في المثال)

يمكنك العثور على قائمة كاملة من الألوان على موقع الويب - (STM). لتغيير اللون ، ما عليك سوى تغيير القيمة بعد القولون والاستمتاع بعملك.

خلق خلفية مع نسيج

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

لون الخلفية: # 537759 ؛

صورة الخلفية: url (images / pattern.png) ؛

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

جعل الخلفية مع التدرج

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

لون الخلفية: # 83C5E9 ؛

صورة الخلفية: url (images / gradient.jpg) ؛

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

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

استخدام صورة كبيرة لخلفية الموقع

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

لون الخلفية: # 000000 ؛

صورة الخلفية: url (images / image title.jpg) ؛

موضع الخلفية: أعلى الوسط ؛

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

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

تغيير الخلفية على مواقع ucoz

يمكن استخدام طرق إنشاء خلفية لموقع ما على أنظمة إدارة محتوى مختلفة ، ولكن ليس على المواقع - ucoz. لتغيير خلفية موقع ucoz ، تحتاج إلى الانتقال إلى لوحة تحكم الموقع ، انتقل إلى "إدارة التصميم"، ثم في "تحرير القوالب".

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

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

قم بتغيير خلفية الموقع إلى HTML

إذا كنت تريد إنشاء خلفية على موقع html باستخدام صورة ، فما عليك سوى إدخال السطر في الكود:

وإذا كنت تريد إنشاء خلفية الموقع باستخدام اللون ، فيجب أن يبدو الخط كما يلي:

بهذا تنتهي قصتنا. أنت الآن تعرف كيفية إنشاء خلفية لموقع ويب. مشاريع ناجحة!

فلاد مرزفيتش

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

خلفية على صفحة ويب

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

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

إضافة صورة خلفية

تتم إضافة صورة عن طريق تحديد عنوان الصورة من خلال عنوان url الخاص بالكلمة الرئيسية. يتم استخدام وسيطات عدم التكرار (بدون تكرار) و تكرار x (التكرار الأفقي) و تكرار y (التكرار الرأسي) للتحكم في كيفية تكرار الصورة. ينتج عن هذا صفحة الويب الموضحة في الشكل. 1.

لتعيين صورة على صفحة ويب ، أضف خاصية نمط الخلفية إلى محدد BODY ، كما هو موضح في المثال 1.

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

في هذا المثال ، يتم تعريف target.gif الرسومية كخلفية لصفحة الويب دون تكرار الصورة. لمنع الصورة من الالتفاف على حواف المستعرض ، يتم إزاحتها بمقدار 30 بكسل إلى اليمين و 20 بكسل لأسفل من موضعها الأصلي.

تكرار النمط

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

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

مثال 2: كرر الخلفية عموديًا

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

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

يوضح المثال 3 كود HTML لإنشاء خلفية متدرجة.

مثال 3: تكرار الخلفية أفقيًا

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

إضافة صورة إلى النص

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

مثال 4: إضافة صورة

رأس

النص الرئيسي

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

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

علامات HTML الأساسية لإنشاء خلفية

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

1. اكتب علامة السمة.
2. من خلال أسلوب CSS في كود HTML.
3. اكتب نمط CSS في ملف منفصل.

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

1. الطريقة الأولى للكتابة هي من خلال سمة العلامة (الجسم) في ملف index.htm. تتم كتابته على النحو التالي: (body background = "Folder_name / Image_name.extension") (/ body). بمعنى ، إذا كانت لدينا صورة بالاسم "صورة" وامتداد JPG ، وقمنا بتسمية المجلد باسم "صور" ، فسيبدو إدخال كود HTML على النحو التالي: (body background = "Images / Picture.jpg" ) ... (/ الجسم).
2. تؤثر طريقة الكتابة الثانية على نمط CSS ولكنها تتم كتابتها في نفس الملف المسمى index.htm. (body style = "background: url (" ../ Images / Picture.jpg ")").
3. وطريقة التسجيل الثالثة مكونة من ملفين. في مستند يسمى index.htm ، يتم كتابة السطر التالي: (head) (link rel = "stylesheet" type = "text / css" href = "Path_to CSS_file") (/ head). وفي ملف النمط المسمى style.css نكتب بالفعل: body (background: url (Images / Picture.jpg ")).

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

طرق لمد صورة الخلفية لعرض النافذة

دعنا نمثل شاشتنا كنسبة مئوية. اتضح أن عرض الشاشة وطولها بالكامل سيكونان 100٪ × 100٪. نحن بحاجة إلى تمديد الصورة لهذا العرض. دعنا نضيف سطرًا إلى إدخال الصورة في ملف style.css ، والذي سيمد الصورة إلى العرض الكامل وطول الشاشة. كيف يتم كتابة هذا بأسلوب CSS؟ كل شيء بسيط!

الخلفية: url (Images / Picture.jpg ")

حجم الخلفية: 100٪ / * سيعمل هذا الإدخال مع معظم المتصفحات الحديثة * /

لذلك توصلنا إلى كيفية جعل الصورة الخلفية بتنسيق html بملء الشاشة. هناك طريقة أخرى للكتابة في ملف index.htm. على الرغم من أن هذه الطريقة قديمة ، إلا أنه من الضروري للمبتدئين معرفتها وفهمها. في علامة (head) (style) div (background-size: cover؛) (/ style) (/ head) ، يعني هذا الإدخال أننا نختار قالبًا خاصًا للخلفية ، والذي سيتم وضعه على كامل عرض نافذة او شباك. نظرنا في طريقتين لجعل خلفية الموقع صورة html بحيث تمتد الصورة إلى العرض الكامل للشاشة في أي من المتصفحات الحديثة.

كيفية عمل خلفية ثابتة

إذا قررت استخدام صورة كخلفية لمورد ويب مستقبلي ، فأنت تحتاج فقط إلى معرفة كيفية جعلها ثابتة بحيث لا تمتد في الطول وتفسد المظهر الجمالي. يكفي فقط وصف هذه الإضافة الصغيرة بمساعدة. تحتاج إلى إضافة عبارة واحدة بعد الخلفية: url (Images / Picture.jpg ") ثابت في ملف style.css ؛ أو إضافة سطر منفصل بعد الفاصلة المنقوطة بدلاً من ذلك - الموضع: ثابت. وبالتالي ، ستصبح صورة الخلفية ثابتة. أثناء التمرير من خلال المحتوى الموجود على الموقع ، سترى أن سطور النص تتحرك ، لكن الخلفية تظل في مكانها ، لذلك تعلمت كيفية جعل الخلفية صورة بلغة html بعدة طرق.

العمل مع جدول في HTML

كثير من مطوري الويب عديمي الخبرة ، عندما يواجهون الجداول والكتل ، غالبًا ما لا يفهمون كيفية جعل الصورة خلفية لجدول في لغة تأشير النص الفائق. مثل كل شيء وأسلوب CSS ، فإن لغة برمجة الويب هذه بسيطة للغاية. وسيكون حل هذه المشكلة هو كتابة سطرين من التعليمات البرمجية. يجب أن تعلم بالفعل أن كتابة صفوف وأعمدة الجدول يُشار إليها بعلامتي (tr) و (td) ، على التوالي. لجعل خلفية الجدول تبدو كصورة ، أضف عبارة بسيطة إلى علامة (table) أو (tr) أو (td) مع رابط للصورة: background = URL للصورة. من أجل الوضوح ، نقدم بعض الأمثلة.

جداول مع صورة بدلاً من الخلفية: أمثلة HTML

لنرسم جدول 2x3 ونجعله خلفية الصورة المحفوظة في مجلد "Images": (table background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ جدول) . لذلك سيتم رسم طاولتنا في خلفية الصورة.

الآن دعنا نرسم نفس الجدول بأبعاد 2x3 ، لكن أدخل الصورة في الأعمدة المرقمة 1 و 4 و 5 و 6. (جدول) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td ) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = “Images / Picture.jpg”) 4 (/ td) (td background = “Images / Picture.jpg”) 5 (/ td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). بعد المشاهدة ، نرى أن الخلفية تظهر فقط في تلك الخلايا التي سجلنا فيها ، وليس في الجدول بأكمله.

عبر موقع المستعرض

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