cssblog.ir logo
P

background-size

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

مشخصه background-size سایز تصویر زمینه استفاده شده برای عناصر را تعیین می کند و از طریق آن می توان الگوریتم های پوشش تصویر پس‌زمینه عنصر را تعیین نمود

یکی از مشخصه های بسیار کاربردی در رابطه با پس زمینه ها مشخصهbackground-size می باشد که هر توسعه دهنده CSS حتما باید معنی مقدارهای مختلف آن را بخوبی بداند چراکه اندکی بی دقتی در این مقادیر ممکن است باعث شود که مثلا تصویر پس زمینه اسلایدر اصلی یک وبسایت در یک سایز صفحه خاص، از کناره ها کوچک باشد یا نسبت آن بهم بریزد. 

به این مشخصه می توان به چند شکل مقدار دهی نمود که هریک معنی خاص خود را دارند. این مقادیر عبارتند از:

کلمات کلیدی

همانند موقعیت دهی پس زمینه ها که چند کلمه کلیدی داشت، در اینجا نیز می توان علاوه بر مقدار پیشفرضauto از مقادیرcontain وcover نیز استفاده نمود. 

تفاوت cover و contain

فرق اصلی این دو مقدار در این است که وقتی ما از مقدار cover استفاده می کنیم به مرورگر می گوییم که “حتما این تصویر باید کل فضای پس زمینه را پُر کند و مطمئن شو که هیچ جای خالی ای باقی نمانده است”  اما وقتی از مقدار contain استفاده می کنیم انگار که به مرورگر می گوییم “مطمئن شو که تمام تصویر را نمایش می دهی و هیچ قسمتی از تصویر نیست که دیده نشود “ برای درک بهتر به این مثال دقت کنید که جملات بیان شده را به شکل تصویری نمایش می دهد. 

 

مقدارauto نیز به مرورگر اجازه می دهد تا سایز تصویر را بصورت خودکار و بر اساس سایز اصلی تصویر و نسبت آن، اندازه گیری کند.

وارد کردن یک مقدار

اگر فقط یک مقدار مانند background-size: 200px وارد شود مرورگر این مقدار را برای عرض تصویر در نظر گرفته و ارتفاع تصویر راauto در نظر می گیرد. ما از تمام واحدهای مجاز سایز می توانیم در این حالت استفاده کنیم. 

دو مقدار

وقتی که دو مقدار وارد می شوند اولین مقدار برای عرض تصویر و دومین برای ارتفاع آن در نظر گرفته می شود. 

چند تصویر

اگر ما به background چند تصویر را داده باشیم (با استفاده از کاما جدا کنیم) می توانیم درbackground-size نیز چنین کاری را انجام دهیم و با استفاده از کاما (,) مقادیر مرتبط با تصاویر را وارد کنیم. 

 جهت کسب اطلاعات بیشتر می‌توانید به مشخصه پس زمینه در CSS مراجعه نمائید

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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