تکنیک را با CSS اجرا کنید
اگر شما یک وب سایت را طراحی می کنید، ممکن است علاقه مند به یادگیری نحوه ایجاد یک تصویر پس زمینه ثابت یا علامت روی یک صفحه وب باشید. این یک روش طراحی رایج است که برای مدت زمان زیادی آنلاین شده است. این یک اثر مفید است که در کلاهبرداری از طراحی وب خود داشته باشید.
اگر قبلا این کار را انجام نداده اید و یا قبلا آن را بدون موفقیت انجام داده اید، ممکن است این فرایند ارعاب برانگیز باشد، اما این در واقع بسیار مشکل نیست. با استفاده از این آموزش مختصر، شما با استفاده از CSS، اطلاعاتی را که لازم است در طی چند دقیقه به کار ببرید، دریافت خواهید کرد.
شروع شدن
تصاویر پس زمینه یا علامت های (که واقعا فقط تصاویر پس زمینه بسیار سبک) تاریخ در طراحی چاپ شده است. اسناد به مدت طولانی حاوی علامت های حاوی آنها برای جلوگیری از آنها کپی شده است. علاوه بر این، بسیاری از آگهی ها و بروشورها از تصاویر پس زمینه به عنوان بخشی از طراحی برای قطعه چاپ استفاده می کنند. طراحی وب طولانی مدت وام گرفته شده از نسخه های چاپی و تصاویر پس زمینه یکی از این سبک های قرض گرفته شده است.
این تصاویر پس زمینه بزرگ با استفاده از سه ویژگی سه بعدی زیر CSS ایجاد می شوند:
- تصویر پس زمینه
- پس زمینه-تکرار
- پس زمینه دلبستگی
- پسزمینه
تصویر پس زمینه
شما تصویر پس زمینه را برای تعریف تصویر استفاده می کنید که به صورت علامت استفاده می شود. این سبک به سادگی با استفاده از یک مسیر فایل برای بارگذاری تصویری که در سایت دارید، احتمالا در یک پوشه به نام «تصاویر» است.
background-image: url (/images/page-background.jpg)؛
مهم است که تصویر خود سبک تر یا شفاف تر از یک تصویر طبیعی باشد. این امر باعث می شود نگاهی به "علامت" داشته باشیم که در آن یک تصویر نیمه شفاف پشت متن، گرافیک و سایر عناصر اصلی صفحه وب قرار دارد. بدون این مرحله، تصویر پس زمینه با اطلاعات در صفحه شما رقابت خواهد کرد و خواندن آن دشوار است.
شما می توانید تصویر پس زمینه را در هر برنامه ویرایش مانند Adobe Photoshop تنظیم کنید.
سابقه تکرار
املا تکرار پسزمینه بعدی می آید اگر می خواهید تصویر خود را یک گرافیک بزرگ به سبک علامت گذاری بفرم، از این ویژگی استفاده کنید تا این تصویر تنها یک بار نمایش داده شود.
پس زمینه تکرار: بدون تکرار؛
بدون ویژگی "بدون تکرار"، پیش فرض این است که تصویر بارها و بارها بر روی صفحه تکرار خواهد شد. این در بسیاری از طرح های مدرن وب سایت نامطلوب است، بنابراین این سبک باید در CSS شما ضروری باشد.
ضمیمه سابقه
پسوند فایل یک ویژگی است که بسیاری از طراحان وب را فراموش کرده است. با استفاده از آن تصویر پس زمینه خود را حفظ می کند زمانی که شما با استفاده از "ثابت" اموال. این چیزی است که تصویر را به یک علامت با ابعادی تبدیل می کند که در صفحه ثابت شده است.
مقدار پیش فرض برای این ویژگی "حرکت" است. اگر مقدار ارزش دلخواه پس زمینه را مشخص نکنید، پس زمینه با بقیه صفحه حرکت می کند.
ضمیمه پس زمینه: ثابت؛
پس زمینه
اندازه پس زمینه یک ویژگی جدید CSS است. این به شما این امکان را می دهد که اندازه یک پس زمینه را براساس نمای دید آن مشاهده کنید. این برای وبسایت های پاسخگو که در اندازه های مختلف در دستگاه های مختلف نمایش داده می شود بسیار مفید است.
پس زمینه: پوشش؛
دو ارزش مفید برای استفاده از این ویژگی می توان به موارد زیر اشاره کرد:
- Cover - فلس پس زمینه را به طوری که یا عرض کامل و یا ارتفاع کامل نشان داده شده است. این به این معنی است که برخی از قسمت های تصویر ممکن است بر روی صفحه ظاهر نشود اما کل منطقه پوشش داده خواهد شد.
- Contain - تصویر را مقیاس می کند، بنابراین هر دو عرض و ارتفاع را در منطقه ای که در آن مدل شده است نشان می دهد. تصویر قطع نشده است، اما نکته ای است که بخش هایی از این منطقه ممکن است توسط تصویر پوشش داده نشود.
اضافه کردن CSS به صفحه شما
پس از شناختن ویژگی های بالا و ارزش های آنها می توانید این سبک ها را به وب سایت خود اضافه کنید.
اگر شما یک سایت تک صفحه ای را ایجاد می کنید، عنوان HEAD صفحه وب خود را اضافه کنید. اگر در حال ایجاد یک سایت چند صفحه ای هستید و می خواهید از قدرت یک صفحه خارجی استفاده کنید، آن را به سبک CSS یک ورق سبک خارجی اضافه کنید.