نحوه ایجاد تصویر پس زمینه در وب سایت

فهرست مطالب:

نحوه ایجاد تصویر پس زمینه در وب سایت
نحوه ایجاد تصویر پس زمینه در وب سایت

تصویری: نحوه ایجاد تصویر پس زمینه در وب سایت

تصویری: نحوه ایجاد تصویر پس زمینه در وب سایت
تصویری: آموزش جامع CSS : چطور از چند تصویر در پس زمینه یا Background استفاده کنیم؟ 2024, نوامبر
Anonim

شما می توانید اصول ساخت سایت را به تنهایی یاد بگیرید ؛ اطلاعات کافی در مورد این موضوع در اینترنت و کتاب وجود دارد. با این حال ، در مرحله اولیه ، مشکلات اغلب در استفاده از یک یا برچسب دیگر بوجود می آیند. در واقع ، رایج ترین م componentsلفه ها به خاطر سپرده می شوند زیرا هنگام نوشتن هر وب سایتی ضروری هستند.

نحوه ایجاد تصویر پس زمینه در وب سایت
نحوه ایجاد تصویر پس زمینه در وب سایت

دستورالعمل ها

مرحله 1

تصویری را که می خواهید از آن به عنوان تصویر پس زمینه استفاده کنید ، انتخاب کنید. اگر می خواهید متن را روی تصویر وارد کنید ، در این حالت توصیه می شود که خود را به گزینه هایی بدون تنوع بیش از حد محدود کنید ، که در آن چندین رنگ استفاده می شود که ماهیت نزدیک دارند. در اصل ، برای از بین بردن امواج ، می توانید "پس زمینه" برای محتوا ایجاد کنید - و مشکل با موفقیت حل خواهد شد.

گام 2

تصویر را با استفاده از Adobe Photoshop اصلاح کنید. پس از اتمام کار ، دستور Save For Web را از فهرست File انتخاب کرده و پوشه مورد نظر خود را انتخاب کنید. اگر این اولین تصویری است که برای سایت استفاده می شود ، یک پوشه "تصاویر" به طور خودکار ایجاد می شود.

مرحله 3

در برچسب ، ویژگی background = "path to image" را بنویسید. ضبط مثال: یا. در همان زمان ، به یاد داشته باشید که برچسب باید فقط یک بار در کد ظاهر شود ، نباید آن را ضرب کنید.

مرحله 4

تغییرات را در دفترچه یادداشت ذخیره کنید ، روی دکمه "تازه کردن" در مرورگر کلیک کنید. تصویر زمینه بر روی صفحه ظاهر می شود. اگر ابعاد تصویر کوچکتر از پارامترهای صفحه وب باشد ، در هرصورت که لازم باشد تصویر پر می شود تا کل فضا را پر کند. برای اصلاح این کمبود دو راه وجود دارد:

• با استفاده از برنامه Adobe Photoshop ، پارامترهای مورد نیاز تصویر را بر اساس پیکسل تنظیم کنید ("تصویر" - "اندازه تصویر") ؛

• ابعاد مورد نیاز را در کد html تنظیم کنید.

به عنوان مثال ، اگر عرض 1250 پیکسل است و ارتفاع آن 650 پیکسل است ، پس باید ویژگی های لازم را برای سلول جدول که تصویر در آن قرار می گیرد اضافه کنید.

نمی توانید اندازه را در برچسب تنظیم کنید - تصویر همیشه در اندازه کامل نمایش داده می شود.

مرحله 5

آنالوگ ccs برای درج تصویر پس زمینه:

تصویر پس زمینه

بدن {

background-image: url (images / bg.jpg)؛

}

ویژگی "background-image: url (images / bg.jpg)" مسیر تصویر پس زمینه است.

توصیه شده: