cssblog.ir logo
P

background-image

نحوه تعیین تصویر (عکس) پس زمینه

با استفاده از این مشخصه می‌توان تصویر پس زمینه برای عناصر تعیین نمود و زیرمشخصه ای از مشخصه اصلی background می‌باشد.

با استفاده از مشخصه background-image می توان به از تصاویر گرافیکی به عنوان تصویر زمینه عناصر استفاده نمود. 

نحوه استفاده

نحوه انجام کار بسیار ساده است. فقط کافی است در مقابل این مشخصه url() نوشته و در بین دو پرانتز آدرس فایل مورد نظر را وارد کنیم. مانند: 

استفاده از عکس base64 بجای آدرس فایل

ما همچنین می توانیم محتوای فایل را بصورت base64 خوانده و در داخل url وارد کنیم. مثلا:

.background {
	/* data:[<mime type="">][;charset=<charset>][;base64],<encoded data=""> */
	background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat;
}

مزیت این روش حذف HTTP Request مربوط به دریافت فایل تصویر می باشد اما خب مقداری نکات منفی و مشکلات درباره آن وجود دارد. اگر کم شدن Request ها برای شما مسئله است می توانید از تکنیک مشهور دیگری بنام sprite نیز استفاده کنید. 

انتخاب رنگ برای مواقع لود نشدن تصویر

بهتر است که رنگی نیز بعنوان رنگ fallback برای عنصر خود انتخاب کنیم که در مواقعی که تصویر آن لود نمی شود ظاهر اندکی مناسب تر بنظر برسد. همچنین در برخی مواقع که روی تصویر متن قرار خواهد گرفت ممکن است لود نشدن تصویر باعث خوانده نشدن متن شود که بهتر است رنگ پس زمینه ای نیز برای چنین مواقعی درنظر گرفته شود.

از چه فرمت هایی می توان برای تصاویر استفاده نمود؟

تقریبا از تمام فرمت های رایج مانند PNG, SVG, JPG, GIF, WEBP استفاده نمود. 

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

تصویر های زمینه در CSS مشخصه های دیگری نیز دارند که شامل تصویر - background-image ، موقعیت - background-position ، سایز - background-size ، نوع تکرار - background-repeat ، چسبیدن - background-attachment ، منشا - background-origin ، برش - background-clip ، رنگ - background-color  می شود

شما همچنین می توانید روی سایز تصویر زمینه، تکرار آن و موقعیت و … تصاویر کنترل داشته باشید. برای اینکه تمام این مقادیر را بصورت یکجا وارد کنید می توانید از مشخصه background استفاده کنید. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند