آموزش پس زمینه در CSS3 به زبان ساده

با استفاده از CSS3 می توانید چندین پس زمینه را روی عناصر اعمال کنید.

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

CSS3 چندین ویژگی جدید برای کار با پس زمینه عنصر ارائه می دهد؛ مانند برش پس زمینه، پس زمینه های چندگانه و گزینه تنظیم اندازه پس زمینه.

در بخش زیر تمام ویژگی های جدید پس زمینه CSS3 توضیح داده شده است.

ویژگی background-size

می توان از ویژگی background-size برای تعیین اندازه تصاویر پس زمینه استفاده کرد. قبل از CSS3، اندازه تصاویر پس زمینه با اندازه واقعی تصاویر تعیین می شد. اندازه تصویر پس زمینه را می توان با استفاده از مقادیر پیکسل یا درصد و یا همچنین کلمات کلیدی؛ auto، contain و cover تعیین کنید. مقادیر منفی مجاز نیست.

مثال

.box {

width: 250px;

height: 150px;

background: url(“images/sky.jpg”) no-repeat;

background-size: contain;

border: 6px solid #333;

}

نکته: به طور معمول از ویژگی background-size برای ایجاد تصاویر پس زمینه با اندازه کامل استفاده می شود که با توجه به اندازه میدان دید یا عرض مرورگر تغییر مقیاس می دهند.

ویژگی background-clip  در CSS3

ویژگی background-clip مشخص می کند آیا پس زمینه یک عنصر تا حاشیه آن گسترش یابد یا خیر. ویژگی background-clip می تواند سه مقدار را بگیرد: border-box، padding-box، content-box.

مثال

.box {

width: 250px;

height: 150px;

padding: 10px;

border: 6px dashed #333;

background: orange;

background-clip: content-box;

}

ویژگیbackground-origin  در CSS3

ویژگی background-origin را می توان برای تعیین ناحیه موقعیت تصاویر پس زمینه استفاده کرد. مقادیر آن با همان مقادیر ویژگی background-clip می باشد: border-box، padding-box، content-box.

مثال

.box {

width: 250px;

height: 150px;

padding: 10px;

border: 6px dashed #333;

background: url(“images/sky.jpg”) no-repeat;

background-size: contain;

background-origin: content-box;

}

نکته: اگر مقدار ویژگی background-attachment با مقدار “fixed” تعریف شود، ویژگی background-origin نادیده گرفته می شود.

پس زمینه های چندگانه در CSS3

CSS3 به شما امکان می دهد پس زمینه های مختلفی را به یک عنصر اضافه کنید. پس زمینه ها روی یکدیگر لایه بندی می شوند. تعداد لایه ها توسط تعداد مقادیر (جدا شده با کاما) در ویژگی background-image یا ویژگی کوتاه شده background تعریف می شوند.

مثال

.box {

width: 100%;

height: 500px;

background: url(“images/birds.png”) no-repeat center, url(“images/clouds.png”) no-repeat center, lightblue;

}

مقدار اول در لیست پس زمینه ها (جدا شده با کاما)، یعنی تصویر پس زمینه “birds.png” بالای همه لایه ها ظاهر می شود و آخرین مقدار یعنی رنگ “lightblue” در پایین ظاهر می شود. فقط گزینه آخر پس زمینه می تواند حاوی رنگ پس زمینه باشد.

طیف‌های رنگی (Gradients) به عنوان پس‌زمینه در CSS3

یکی از جذاب‌ترین ویژگی‌های اضافه شده در CSS3، امکان استفاده از گرادیان‌ها یا طیف‌های رنگی به جای تصاویرِ ثابت است. با این ویژگی دیگر نیازی به لود کردن عکس برای ایجاد یک پس‌زمینه با رنگ‌های درهم‌آمیخته ندارید که این موضوع سرعت سایت را به شدت بالا می‌برد. در CSS3 دو نوع گرادیان اصلی داریم:

• Linear Gradients (خطی): رنگ‌ها در یک خط مستقیم (بالا به پایین، چپ به راست یا مورب) تغییر می‌کنند.

• Radial Gradients (شعاعی): رنگ‌ها از یک نقطه مرکزی به سمت بیرون تغییر می‌کنند.

• scroll (پیش‌فرض): تصویر پس‌زمینه همراه با صفحه اسکرول می‌شود.

• fixed: تصویر نسبت به مرورگر ثابت می‌ماند و وقتی کاربر صفحه را به پایین می‌کشد، تصویر حرکت نمی‌کند.

• local: تصویر همراه با محتوای داخل خود عنصر (در صورت داشتن اسکرول داخلی) حرکت می‌کند.

مثال:

خلاصه‌نویسی کدهای پس‌زمینه (The Background Shorthand)

وقتی می‌خواهید از چندین ویژگی مختلف برای پس‌زمینه (مثل رنگ، عکس، تکرار و موقعیت) استفاده کنید، نوشتن تک‌تک آن‌ها باعث طولانی شدن کدها می‌شود. در CSS شما می‌توانید تمام این موارد را تنها در یک ویژگی به نام background خلاصه کنید.

ترتیب استاندارد و رایج برای خلاصه‌نویسی به این شکل است:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

.box {
 /* ترتیب: رنگ | تصویر | تکرار | رفتار اسکرول | موقعیت */
 background: #ffffff url("images/logo.png") no-repeat fixed right top;
}

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