جدول دوره

تدریس پیشرفته CSS

• کتابخانه‌های课外 CSS
• مقدمه CSS
• اساس‌های گرامری CSS
• گرامری پیشرفته CSS
• انتخاب‌گرهای مشتق CSS
• انتخاب‌گرهای id CSS
• انتخاب‌گرهای کلاس CSS
• ایجاد CSS
• پس‌زمینه CSS
• متن CSS
• شبکه‌های CSS
• لیست‌های CSS

مدل فریم CSS

• مقدمه به مدل فریم CSS
• حاشیه داخلی CSS
• کناره CSS
• حاشیه خارجی CSS
• ادغام حاشیه خارجی CSS

تعیین مکان CSS

• مقدمه به قرارگیری CSS
• قرارگیری نسبی CSS
• قرارگیری مطلق CSS
• شناور کردن CSS

انتخاب‌گر CSS

• انتخاب‌گرهای عناصر CSS
• گروه‌بندی انتخاب‌گرهای CSS
• تفصیلات انتخاب‌گرهای کلاس CSS
• تفصیلات انتخاب‌گرهای id CSS
• تفصیلات انتخاب‌گرهای ویژگی CSS
• انتخاب‌گرهای نسل CSS
• انتخاب‌گرهای فرزند CSS
• انتخاب‌گرهای برادران مجاور CSS

درس‌های انتخابی

پیشنهاد دوره:

• جعبه ابزار CodeW3C.com

CSS اجازه می‌دهد تا رنگ‌های خالص به عنوان پس‌زمینه استفاده شوند و همچنین اجازه می‌دهد تا از تصاویر پس‌زمینه برای ایجاد اثرهای پیچیده استفاده شود.

CSS در این زمینه از HTML قوی‌تر است.

رنگ پس‌زمینه

می‌توان از ویژگی background-colorرنگ پس‌زمینه برای عنصر تنظیم می‌شود. این ویژگی هر مقدار رنگ معتبر را می‌پذیرد.

این قوانین رنگ پس‌زمینه عنصر را به رنگ خاکستری تنظیم می‌کند:

p {background-color: gray;}

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

p {background-color: gray; padding: 20px;}

به طور شخصی امتحان کنید

رنگ پس‌زمینه می‌تواند برای تمامی عناصر تنظیم شود، این شامل body تا عناصر درون‌محتوایی مانند em و a می‌شود.

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

تصویر پس‌زمینه

برای قرار دادن تصویر در پس‌زمینه، باید از ویژگی background-image.مقدار پیش‌فرض ویژگی background-image none است، که به معنای عدم قرارگیری هیچ تصویری در پس‌زمینه است.

برای تنظیم یک تصویر پس‌زمینه، باید یک مقادیر URL برای این ویژگی تنظیم کنید:

body {background-image: url(/i/eg_bg_04.gif);}

بیشتر پس‌زمینه‌ها به عنصر body اعمال می‌شوند، اما محدود به این نیست.

در مثال زیر، یک پس‌زمینه برای یک پاراگراف اعمال شده است، اما پس‌زمینه به بخش‌های دیگر مستند اعمال نمی‌شود:

p.flower {background-image: url(/i/eg_bg_03.gif);}

حتی می‌توانید برای عناصر درون‌صفحه پس‌زمینه‌ای تنظیم کنید، به عنوان مثال، در مثال زیر یک پس‌زمینه برای یک لینک تنظیم شده است:

a.radio {background-image: url(/i/eg_bg_07.gif);}

به طور شخصی امتحان کنید

به طور نظری، می‌توان تصویر پس‌زمینه برای عناصر جایگزین مانند textareas و select اعمال کرد، اما نه همه کاربران عامل می‌توانند به خوبی این شرایط را مدیریت کنند.

لازم است اشاره کنم که background-image نیز قابل ارث بردن نیست. در واقع، تمام ویژگی‌های پس‌زمینه قابل ارث بردن نیستند.

تکرار پس‌زمینه

اگر نیاز به تکرار تصویر پس‌زمینه در صفحه دارید، می‌توانید از ویژگی background-repeat.

مقدار ویژگی repeat باعث می‌شود که تصویر در جهت افقی و عمودی تکرار شود، مانند روش معمول تکرار تصاویر پس‌زمینه. repeat-x و repeat-y به ترتیب باعث تکرار تصویر در جهت افقی و عمودی می‌شوند، و no-repeat اجازه نمی‌دهد که تصویر در هیچ جهتی تکرار شود.

به صورت پیش‌فرض، تصویر پس‌زمینه از گوشه بالا چپ یک عنصر شروع می‌شود. به مثال زیر نگاه کنید:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

به طور شخصی امتحان کنید

محل‌گذاری پس‌زمینه

می‌توان از ویژگی background-positionتغییر موقعیت تصویر در پس‌زمینه.

در مثال زیر، یک تصویر پس‌زمینه در عنصر body مرکز قرار می‌گیرد:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

روش‌های متعددی برای ارائه مقادیر به ویژگی background-position وجود دارد. ابتدا، می‌توان از برخی از کلمات کلیدی استفاده کرد: top، bottom، left، right و center. معمولاً، این کلمات کلیدی به صورت جفت ظاهر می‌شوند، اما همیشه اینطور نیست. همچنین می‌توان از مقادیر طول استفاده کرد، مانند 100px یا 5cm، و در نهایت می‌توان از مقادیر درصدی استفاده کرد. مقادیر مختلف نوعی تفاوت در قرارگیری تصویر پس‌زمینه دارند.

کلمات کلیدی

کلمات کلیدی قرارگیری تصویر آسان‌ترین برای درک هستند و عملکرد آن‌ها مانند نامشان است. به عنوان مثال، top right باعث قرارگیری تصویر در گوشه بالا راست محدوده حاشیه‌ای عنصر می‌شود.

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

اگر تنها یک کلمه کلیدی وجود دارد، کلمه کلیدی دیگر به عنوان center در نظر گرفته می‌شود.

بنابراین، اگر می‌خواهید در وسط بالا هر پاراگراف یک تصویر ظاهر شود، باید به این صورت اعلام کنید:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

در زیر لیست کلمات کلیدی معادل آورده شده است:

مقدار درصدی

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

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

این باعث قرارگیری مناسب تصویر می‌شود و مرکز آن با مرکز عنصر هم‌تراز می‌شود.به عبارت دیگر، مقدار درصدی همزمان بر روی عنصر و تصویر اعمال می‌شود.یعنی، نقطه‌ای که در تصویر به عنوان 50% 50% توصیف شده (نقطه مرکزی) با نقطه‌ای که در عنصر به عنوان 50% 50% توصیف شده (نقطه مرکزی) هم‌تراز می‌شود.

اگر تصویر در 0% 0% قرار دارد، گوشه بالا چپ آن در گوشه بالا چپ محدوده حاشیه‌ای عنصر قرار می‌گیرد. اگر موقعیت تصویر 100% 100% باشد، گوشه پایین راست تصویر در گوشه پایین راست حاشیه قرار می‌گیرد.

بنابراین، اگر می‌خواهید یک تصویر را در موقعیت 2/3 افقی و 1/3 عمودی قرار دهید، می‌توانید به این صورت اعلام کنید:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

اگر تنها یک مقدار درصدی ارائه شود، این مقدار به عنوان مقدار افقی استفاده خواهد شد و مقدار عمودی به طور پیش‌فرض 50% فرض خواهد شد. این موضوع مشابه با کلمات کلیدی است.

موقع پیش‌فرض background-position 0% 0% است که در عمل معادل top left می‌باشد. این موضوع توضیح می‌دهد که چرا تصویر پس‌زمینه همیشه از گوشه بالا چپ محدوده حاشیه‌ای عنصر شروع به تکرار می‌کند، مگر اینکه شما موقعیت متفاوتی تنظیم کنید.

مقدارهای طولی

مقدارهای طولی توضیح می‌دهند که چگونه گوشه چپ بالای ناحیه پدینگ تغییر می‌کند. نقطه تغییر، گوشه چپ بالای تصویر است.

مثلاً اگر مقدار تنظیم شده 50px 100px باشد، گوشه چپ بالای تصویر در ناحیه پدینگ چپ بالای عنصر در 50 پیکسل به سمت راست و 100 پیکسل به سمت پایین قرار می‌گیرد:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

لطفاً توجه داشته باشید که این نکته با مقادیر درصدی متفاوت است، زیرا offset تنها از یک گوشه به گوشه دیگر است. یعنی گوشه چپ بالای تصویر با نقطه مشخص شده در attribute background-position هم‌راستا است.

ارتباط پس‌زمینه

اگر مستند طولانی باشد، هنگام اسکرول مستند به پایین، تصویر پس‌زمینه نیز به پایین حرکت می‌کند. هنگامی که مستند به پایین رول می‌شود و از موقعیت تصویر فراتر می‌رود، تصویر ناپدید می‌شود.

شما می‌توانید attribute background-attachmentاز این رول کردن جلوگیری کنید. با این attribute، می‌توانید اعلام کنید که تصویر در برابر ناحیه قابل مشاهده ثابت است (fixed)، بنابراین تحت تأثیر رول کردن قرار نمی‌گیرد:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

به طور شخصی امتحان کنید

مقدار پیش‌فرض attribute background-attachment scroll است، یعنی در حالت پیش‌فرض، پس‌زمینه با اسکرول مستند حرکت می‌کند.

ویژگی‌های پس‌زمینه CSS

ابزارخانه

دستورالعمل‌های مرجع CSS

مثال‌های CSS

آزمون CSS

آموزش‌های CSS

لینک‌های حامی