cssblog.ir logo
P

background-repeat

جلوگیری از تکرار تصویر پس زمینه

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

در برخی مواقع ممکن است قصد داشته باشیم تا تصویری که در پس زمینه قرار می دهیم را بصورت عمودی یا افقی در سطح عنصر، تکرار کنیم. بخصوص در مواقعی که ما قصد استفاده از یک الگو بی نهایت (Seamless Pattern) را داریم حتما باید تصویر الگو به نوعی تکرار کنیم تا تمام سطح عنصر را بپوشانیم. برای انجام چنین کاری می توان از مشخصه background-repeat استفاده نمود. 

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

repeat تکرار در هر دو جهت عمودی و افقی

همانطور که در مثال زیر مشاهده می کنید با استفاده از این مقدار الگو ما بصورت کامل سطح عنصر را پوشانده است و از آنجائیکه الگو کاملا Seamless (بی انتها) است اصلا مشخص نیست که در کدام قسمت الگو تمام شده است. در حالیکه الگوی استفاده شده یک تصویر بسیار کوچک است.  

repeat-y تکرار در جهت عمودی

در برخی مواقع ممکن است بخواهیم تصویر را فقط در جهت عمودی تکرار کنیم. مثلا ممکن است حالتی پیش بیاید که عرض تصویر زمینه کاملا فضای پس زمینه را پُر کند یا اصلا نخواهیم که که از لحاظ افقی تصویر در فضا تکرار شود و بخواهیم که در یک سمت قرار بگیرد. مثلا:

repeat-x تکرار در جهت افقی

همانند مقدار قبلی است با این تفاوت که فقط در جهت افقی تکرار می شود.  

no-repeat بدون تکرار

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

 اطلاعات بیشتر درباره مشخصه های مربوط به پس زمینه ها

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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