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

مقدمه

پس‌زمینه‌ی (background) یک عنصر می‌تواند شفاف (transparent)، دارای رنگ یکنواخت (solid color)، دارای گرادیان یا شیب رنگ (gradient) باشد و یا از یک یا چند تصویر یا الگو (pattern) تشکیل شده باشد. پراپرتی background-color برای تعیین رنگ پس‌زمینه و پراپرتی background-image برای تعیین تصویر پس‌زمینه‌ی عناصر کاربرد دارند که در این درس این پراپرتی‌ها و سایر پراپرتی‌های مرتبط با موضوع پس‌زمینه‌ی عناصر را معرفی و بررسی می‌کنیم. گرادیان‌ها و پس‌زمینه‌های گرادیانی را نیز در درس بعد بررسی می‌کنیم.

نعیین رنگ پس‌زمینه

برای اختصاص یک رنگ یکنواخت (solid) به پس‌زمینه‌ی یک عنصر، از یک پراپرتی با نام background-color استفاده می‌شود. این پراپرتی دارای مقدار پیش‌فرض transparent است که منجر به شفافیت کامل پس‌زمینه می‌شود اما می‌تواند هر مقدار معرف یک رنگ را نیز بپذیرد.

در فصل پنجم دیدیم که مقادیر رنگی را می‌توان با استفاده از نام رنگ، کد هگزادسیمال رنگ، توابعی مانند rgb() و hsl() و یا توابع جدیدتری مانند oklab() و oklch() تعیین کرد. در کد زیر از مقادیر رنگی مختلف برای تعیین رنگ پس‌زمینه‌ی چند عنصر استفاده شده است:

CSS

.box{
  width: 400px;
  height: 150px;
  background-color: #567895;
}

h2{
  margin: 15px;
  background-color: black;
  color: white;
}

span{
  background-color: rgba(255, 255, 255, .5);
}

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

برای قرار دادن یک تصویر (و یا یک گرادیان) در پس‌زمینه‌ی یک عنصر، می‌توانیم از یک پراپرتی با نام background-image استفاده کنیم. مقداری که این پراپرتی دریافت می‌کند، آدرس تصویر مورد نظر است که به عنوان آرگومان به تابع url() داده می‌شود. مثال زیر را ببینید:

CSS

div{
  background-image: url('balloons.jpg');
  height: 427px;
  width: 640px;
}

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

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

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

پراپرتی background-repeat

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

CSS

.background-image{
  background-image: url('star.png');
  height: 50rem;
  width: 100rem;
}

این رفتار ناشی از مقدار پیش‌فرض repeat برای پراپرتی background-repeat است. پس، برای کنترل وضعیت تکرار تصویر پس‌زمینه، از پراپرتی background-repeat استفاده می‌شود. این پراپرتی می‌تواند یکی از مقادیر زیر را دریافت کند:

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

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

CSS

.background-image{
  background-image: url('star.png');
  background-repeat: no-repeat;
  height: 50rem;
  width: 100rem;
}

پراپرتی background-attachment

گزینه‌ی دیگری که برای پس‌زمینه‌ها قابل تنظیم است، تعیین رفتار تصویر پس‌زمینه در هنگام اسکرول صفحه یا خود عنصر است. این مطلب را می‌توان با استفاده از پراپرتی background-attachment کنترل کرد که می‌تواند یکی از مقادیر زیر را دریافت کند:

• scroll: مقدار پیش‌فرض که باعث می‌شود هنگام اسکرول صفحه، بک‌گراند هم اسکرول شود. البته در صورت اسکرول خود عنصر، بک‌گراند ثابت می‌ماند. به عبارت دیگر، مقدار scroll باعث می‌شود که بک‌گراند به فریم (border) عنصر الصاق (attach) شود.
• fixed: در صورت اسکرول صفحه یا عنصر، بک‌گراند ثابت می‌ماند. به عبارت دیگر، مقدار fixed باعث می‌شود که بک‌گراند به viewport الصاق شود.
• local: در صورت اسکرول عنصر، بک‌گراند به همراه محتوای عنصر اسکرول می‌شود و موقعیت مکانی بک‌گراند نسبت به ناحیه‌ی قابل اسکرول عنصر تعیین می‌شود نه نسبت به فریم عنصر. به عبارت دیگر، مقدار local باعث می‌شود که بک‌گراند به محتوای عنصر الصاق شود.

در کد زیر، تخصیص مقدار fixed به پراپرتی background-attachment باعث شده تا بک‌گراند نسبت به viewport فیکس شود. با تغییر مقدار این پراپرتی، سایر حالات را مشاهده کنید.

CSS

.fixed-bg{
  background-image: url('balloons.jpg');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

پراپرتی background-position

برای تعیین موقعیت مکانی تصویر پس‌زمینه از پراپرتی background-position استفاده می‌شود. در اینجا از یک دستگاه مختصات فرضی استفاده می‌شود که در آن گوشه‌ی بالا و سمت چپ به عنوان مبدأ یا نقطه‌ی (0,0) در نظر گرفته می‌شود. این پراپرتی یک یا دو مقدار را با یک فاصله بین آنها دریافت می‌کند که اولی برای مشخصه‌ی افقی یا x در دستگاه مختصات و دومی برای مشخصه‌ی عمودی یا y است. این مقادیر می‌توانند اعداد بر حسب پیکسل یا درصد و یا مقادیر از پیش تعریف‌شده‌ی top، bottom، left، right و center باشند.

مقادیر از پیش تعریف‌شده‌ی top، center و bottom برای تعیین مشخصه‌ی عمودی و مقادیر left، center و right برای تعیین مشخصه‌ی افقی کاربرد دارند. در حالت پیش‌فرض، یک تصویر پس‌زمینه در مبدأ یا همان نقطه‌ی (0,0) قرار می‌گیرد.

در مثال زیر تصویر پس‌زمینه به اندازه‌ی 20px به راست و 10px به سمت پایین جابجا می‌شود.

CSS

background-position: 20px 10px;

اما یک سینتکس چهارمقداری هم وجود دارد که فاصله‌ی تصویر را از لبه‌ها مشخص می‌کند. در این سینتکس، مقدار اول و سوم، مشخص‌کننده‌ی لبه‌ها هستند و مقادیر دوم و چهارم فاصله از این لبه‌ها را مشخص می‌کنند. برای مثال، در کد زیر از این سینتکس به نحوی استفاده شده که 25px از لبه‌ی پایینی و 15px از لبه‌ی سمت راست فاصله بگیرد:

CSS

background-position: bottom 25px right 15px;

پراپرتی background-position در حقیقت، یک پراپرتی اختصاری برای دو پراپرتی background-position-x و background-position-y است.

پراپرتی background-size

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

CSS

.header-image{
  background-image: url('balloons.jpg');
  height: 15rem;
  border: 3px solid #000000;
}

در این موارد، می‌توانیم با استفاد از پراپرتی background-size اندازه‌ی تصویر پس‌زمینه را تغییر دهیم. این پراپرتی می‌تواند مقادیر را با استفاده از واحدهای طولی و یا درصد دریافت کند و یا اینکه یکی از کلمات کلیدی contain و cover را به عنوان مقدار بپذیرد.

پراپرتی background-size می‌تواند یک یا دو مقدار را دریافت کند. اگر دو مقدار برای آن فراهم کنیم، مقدار اول معرف اندازه‌ی عرض تصویر و مقدار دوم معرف اندازه‌ی ارتفاع تصویر است و اگر تنها یک مقدار برای این پراپرتی فراهم کنیم، این مقدار برای عرض تصویر در نظر گرفته می‌شود و ارتفاع تصویر به طور ضمنی روی auto تنظیم می‌شود که باعث حفظ نسبت جانبی تصویر می‌شود. کلمات کلیدی contain و cover نیز به این معنا هستند:

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

CSS

.header-image{
  background-image: url('balloons.jpg');
  background-size: 300px 100px;
  background-repeat: no-repeat;
  height: 15rem;
  border: 3px solid #000000;
}

پراپرتی اختصاری background

پراپرتی background یک پراپرتی اختصاری است که میانبری برای تنظیم همه‌ی پراپرتی‌های مربوط به پس‌زمینه‌ی عناصر در قالب تنها یک استایل فراهم می‌کند. مثال زیر را ببینید:

CSS

background: url(bg.png) no-repeat fixed right bottom;

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

CSS

background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;              

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

پس‌زمینه‌های چندگانه

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

CSS

background-image: url(bg1.png), url(bg2.png);
background-repeat: no-repeat, repeat-y;
background-attachment: fixed, fixed;
background-position: right bottom, top left;              

در این وضع، اولین پس‌زمینه در بالا نمایش داده می‌شود و پس‌زمینه‌های بعدی حکم لایه‌هایی را دارند که زیر این تصویر بالایی قرار می‌گیرند و لذا تنها بخش‌هایی از آنها دیده می‌شود که در لایه‌های بالایی transparent باشند.

به جای کد بالا می‌توانیم از یک پراپرتی background به صورت زیر نیز استفاده کنیم:

CSS

background: url(bg1.png) no-repeat fixed right bottom, url(bg2.png) repeat-y fixed top left;