cssblog.ir logo
P

background

رنگ یا تصویر پس زمینه عناصر در CSS

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

با استفاده از  مشخصه background می توان پس زمینه تمام عناصر را تعیین نمود. خب همانطور که می دانیم پس زمینه ها ممکن است تصویر یا رنگ یا یک شیب رنگ (gradient) باشند به همین دلیل مقادیر مختلفی را می توان به این مشخصه داد. 

مشخصه background از ترکیب چندین زیرمشخصه دیگر تشکیل شده است که حضور آنها اجباری نبوده و همچنین آنها از طریق مشخصه های جداگانه ای که همگی بصورت background-{property-name} نام گذاری شده‌اند، در دسترس هستند. این زیرمشخصه ها عبارتند از: 

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

وقتی ما از مشخصه background استفاده می کنیم می توانیم با ترتیب پیشنهادی زیر تمام مشخصه ها را ترکیب کنیم. 


body {
    background:
            url(sweettexture.jpg)    /* image */
            top center / 200px 200px /* position / size */
            no-repeat                /* repeat */
            fixed                    /* attachment */
            padding-box              /* origin */
            content-box              /* clip */
            red;                     /* color */
}

برای درک کامل نحوه استفاده از این مشخصه مثال های زیر را درنظر بگیرید

رنگ پس زمینه عادی


div {
	background: #f9f9f9;
}

تصویر زمینه بدون تکرار 

الگویی که در تصویر زمینه تکرار می شود 

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

 

مقادیر پیشفرض و نقض سایر مشخصه ها

دو نکته را باید در هنگام استفاده از مشخصه background درنظر داشت. اول اینکه در صورتیکه هرکدام از زیرمشخصه ها وارد نشوند مقادیر پیشفرض استفاده خواهند شد.

نکته دوم این است که در صورتیکه مشخصه background پس از سایز مشخصه های مربوط به پس زمینه مانند background-color یا سایر آنها، ظاهر شود، باعث نقض شدن آنها خواهد شد. مثلا:

استفاده از چند پس زمینه

در CSS3 امکان داشتن چندین پس زمینه روی یک عنصر فرآهم شده است. برای انجام چنین کاری باید background ها را بوسیله کاما (,) از هم جدا کرد. مثلا:

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

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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