Javascript Disabled!

Please Enable Javascript if you disabled it, or use another browser we preferred Google Chrome.
Please Refresh Page After Enable

Powered By UnCopy Plugin.

نحوه تنظیم تصویر پس زمینه در CSS


برای تنظیم یک تصویر پشت عنصر، “تصویر پس زمینهویژگی CSS وارد عمل می شود. به طور پیش فرض در گوشه سمت چپ بالای صفحه نمایش داده می شود و به صورت افقی و عمودی تکرار می شود. همچنین می توانید بیش از یک تصویر را در پس زمینه عنصر HTML اضافه کنید. علاوه بر این، عرض و ارتفاع تصویر را مطابق با ترجیحات خود تنظیم کنید. با این حال، می توانید تکرار تصویر را نیز متوقف کنید.

این نوشتن نتایج یادگیری زیر را ارائه خواهد کرد:

    • ویژگی پس زمینه تصویر
    • نحوه تنظیم یک تصویر پس زمینه

ویژگی CSS “background-image”.

تصویر پس زمینهویژگی ” برای اعمال یک تصویر در پس زمینه یک تگ مشخص استفاده می شود.

نحو

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

پس زمینه تصویر: آدرس تصویر();


در اینجا، image url() نام تصویر یا مسیر پوشه تصویر را دارد که در آن وجود دارد.

اجازه دهید مثالی را امتحان کنیم تا درک بهتری داشته باشیم.

مثال: چگونه با استفاده از CSS یک تصویر پس زمینه تنظیم کنیم؟

در این مثال، ابتدا دو عنصر دیگر (تگ

و

) ایجاد خواهیم کرد که در پشت آنها تصویر پس زمینه اضافه می شود. می توانید طبق انتخاب خود عناصر اضافه کنید و ویژگی پس زمینه تصویر را به آن اعمال کنید:

<بدن>
<h1>تنظیم تصویر پس زمینهh1>
<پ>
به تنظیم تصویر پس زمینه از ویژگی تصویر پس زمینه css استفاده می کند
پ>
بدن>


شما می توانید عناصر را مطابق با انتخاب خود اضافه کنید و ویژگی پس زمینه تصویر را به آن اعمال کنید.

به CSS بروید و نام تصویر را در ” اختصاص دهیدتصویر پس زمینهآدرس اینترنتی:

بدن {
پس زمینه-تصویر: url(“img.jpg”);
}


پس از انجام تمام مراحل، اجرای فایل HTML، نتیجه زیر را دریافت خواهید کرد:


در اینجا می بینید که تصویر پس زمینه در حال تکرار است. برای جلوگیری از این، از “پس زمینه-تکرار” ویژگی و مقدار آن را به ”بدون تکرار”:

بدن {
پس زمینه-تصویر: url(“img.jpg”);
background-repeat: no-repeat;
}


وقتی همه چیز تمام شد، کد را اجرا کنید و صفحه وب خود را بررسی کنید:


اکنون، ظاهری تمیز و زیبا از تصویر پس‌زمینه تنظیم شده روی برچسب دارید.

روش های خوب برای تنظیم تصاویر پس زمینه

    • تصویری را انتخاب کنید که با رنگ متن شما مطابقت داشته باشد.
    • از ترکیب رنگ های جذاب استفاده کنید.
    • اگر تصویر پس زمینه و رنگ متن شما با یکدیگر مطابقت ندارند، صفحه وب شما ضعیف طراحی شده است.

نتیجه

برای افزودن یک تصویر پس‌زمینه در CSS، از «تصویر پس زمینهخصوصیت ” و URL تصویر را در تابع URL() CSS ارائه دهید. همچنین می توانید با استفاده از ” از تکرار تصویر خود جلوگیری کنیدپس زمینه-تکرار” ویژگی و تنظیم مقدار آن به ”هیچ یک“. این مقاله روش افزودن یک تصویر به پس‌زمینه با استفاده از «تصویر پس زمینه” و ”پس زمینه-تکرار” خواص


به این مطلب امتیاز دهید

جهت ارسال نظر اینجا کلیک کنید.