تنفيذ التقنية مع CSS
إذا كنت تصمم موقعًا على الويب ، فقد تكون مهتمًا بتعلم كيفية إنشاء صورة خلفية ثابتة أو علامة مائية على صفحة ويب. هذا هو علاج التصميم الشائع الذي كان شائعًا على الإنترنت لبعض الوقت. إنه تأثير مفيد في حقيبة تصميم الويب الخاصة بك من الحيل.
إذا لم تفعل ذلك من قبل أو جربته سابقًا دون الحظ ، فقد تبدو العملية مرعبة ، ولكنها في الواقع ليست صعبة جدًا على الإطلاق. مع هذا البرنامج التعليمي الموجز ، ستحصل على المعلومات التي تحتاجها لإتقان التقنية في غضون دقائق باستخدام CSS.
ابدء
الصور الخلفية أو العلامات المائية (التي هي في الحقيقة مجرد صور خلفية خفيفة للغاية) لها تاريخ في التصميم المطبوع. تحتوي المستندات على علامات مائية عليها لمنع نسخها. بالإضافة إلى ذلك ، تستخدم العديد من النشرات والكتيبات صور خلفية كبيرة كجزء من التصميم للقطعة المطبوعة. لطالما استوحى تصميم الويب أنماطًا من الصور المطبوعة والخلفية ، وهي إحدى هذه الأساليب المقترضة.
يسهل إنشاء صور الخلفية الكبيرة هذه باستخدام خصائص أنماط CSS الثلاثة التالية:
- الصورة الخلفية
- تكرار الخلفية
- مرفق الخلفية
- خلفية الحجم
الصورة الخلفية
ستستخدم صورة الخلفية لتعريف الصورة التي سيتم استخدامها كعلامة مائية. يستخدم هذا النمط ببساطة مسار ملف لتحميل صورة لديك على موقعك ، على الأرجح في دليل يدعى "الصور".
background-image: url (/images/page-background.jpg)؛
من المهم أن تكون الصورة نفسها أخف أو أكثر شفافية من الصورة العادية. سيؤدي هذا إلى إنشاء مظهر "العلامة المائية" حيث توجد صورة شبه شفافة خلف النص والرسومات والعناصر الرئيسية الأخرى لصفحة الويب. بدون هذه الخطوة ، ستتنافس صورة الخلفية مع المعلومات الموجودة على صفحتك وتجعل من الصعب قراءتها.
يمكنك ضبط صورة الخلفية في أي برنامج تعديل مثل Adobe Photoshop.
تكرار الخلفية
خاصية تكرار الخلفية تأتي بعد ذلك. إذا كنت تريد أن تكون صورتك عبارة عن رسم كبير على نمط العلامة المائية ، فستستخدم هذه الخاصية لجعل هذه الصورة تعرض مرة واحدة فقط.
تكرار الخلفية: لا تكرار ؛
بدون خاصية "بدون تكرار" ، يكون الإعداد الافتراضي هو تكرار الصورة مرارًا وتكرارًا على الصفحة. هذا أمر غير مرغوب فيه في معظم تصميمات صفحات الويب الحديثة ، لذا يجب اعتبار هذا النمط ضروريًا في CSS.
مرفق الخلفية
مرفق الخلفية هو خاصية أن العديد من مصممي الويب نسيانها. يؤدي استخدامه إلى الحفاظ على ثبات صورة الخلفية في مكانها عند استخدام الخاصية "الثابتة". هذا ما يحول هذه الصورة إلى علامة مائية مثبتة على الصفحة.
القيمة الافتراضية لهذه الخاصية هي "scroll". إذا لم تحدد قيمة مرفق خلفية ، فستتصفح الخلفية مع بقية الصفحة.
background-attachment: fixed؛
خلفية الحجم
حجم الخلفية هو خاصية CSS أحدث. يتيح لك تعيين حجم الخلفية استنادًا إلى إطار العرض الذي يتم عرضه فيه. وهذا مفيد جدًا لمواقع الويب المتجاوبة التي سيتم عرضها بأحجام مختلفة على أجهزة مختلفة .
حجم الخلفية: غطاء ؛
هناك قيمتان مفيدتان يمكنك استخدامهما لهذا الموقع تشمل:
- اﻟﻐطﺎء - ﯾﻘوم ﺑﺗدوﯾر اﻟﺧﻟﻔﯾﺔ ﺣﺗﯽ ﯾﺗم ﻋرض اﻟﻌرض اﻟﮐﺎﻣل أو اﻻرﺗﻔﺎع اﻟﮐﺎﻣل. هذا يعني أن بعض أجزاء الصورة قد لا تظهر على الشاشة ولكن سيتم تغطية المنطقة بالكامل.
- Contain - يقوم بتحجيم الصورة بحيث يظهر كل العرض والارتفاع في المساحة التي يتم تصميمها. لم يتم قطع الصورة ، ولكن الجانب السلبي هو أن أجزاء من المنطقة قد لا تكون مغطاة بالصورة.
إضافة CSS إلى صفحتك
بعد فهم الخصائص المذكورة أعلاه وقيمها ، يمكنك إضافة هذه الأنماط إلى موقع الويب الخاص بك.
أضف ما يلي إلى HEAD لصفحة الويب الخاصة بك إذا كنت تقوم بإنشاء موقع صفحة واحدة. أضفه إلى أنماط CSS في ورقة أنماط خارجية إذا كنت تنشئ موقعًا متعدد الصفحات وتريد الاستفادة من قوة ورقة خارجية.
<نمط>
الجسم {
background-image: url (/images/page-background.jpg)؛
تكرار الخلفية: لا تكرار ؛
background-attachment: fixed؛
حجم الخلفية: غطاء ؛
}
// ->
غيّر عنوان URL لصورة الخلفية لتتطابق مع اسم الملف ومسار الملف المناسبين لموقعك. قم بإجراء أي تغييرات مناسبة أخرى لتتناسب مع التصميم الخاص بك كذلك ، وسيكون لديك علامة مائية.
يمكنك تحديد الموقف ، أيضا
إذا كنت ترغب في وضع العلامة المائية في موقع معين على صفحة الويب الخاصة بك ، فيمكنك القيام بذلك أيضًا. على سبيل المثال ، قد ترغب في وجود العلامة المائية في منتصف الصفحة أو ربما في الركن السفلي ، بدلاً من الزاوية العلوية ، وهي القيمة الافتراضية.
للقيام بذلك ، قم بإضافة الخاصية background-position إلى النمط الخاص بك. سيضع هذا الصورة في المكان المحدد الذي ترغب في ظهوره فيه. يمكنك استخدام قيم البكسل أو النسب المئوية أو المحاذاة لتحقيق تأثير تحديد الموقع هذا.
خلفية الموقف: المركز ؛