در طراحی وب، گاهی نیاز داریم چندین تصویر یا گرادیان را به عنوان پس‌زمینه یک عنصر استفاده کنیم. CSS این امکان را با ویژگی background و مقادیر چندگانه فراهم می‌کند. با استفاده از روش shorthand می‌توانیم کدهای تمیزتر و بهینه‌تری بنویسیم.
کاربردهای عملی
تعریف چند پس‌زمینه کاربردهای متنوعی دارد:
- ترکیب تصاویر و گرادیان‌ها برای افکت‌های بصری پیشرفته
- اضافه کردن بافت (texture) به پس‌زمینه اصلی
- ایجاد افکت‌های لایه‌ای بدون نیاز به عناصر اضافی HTML
- بهینه‌سازی عملکرد با کاهش تعداد عناصر DOM
نمونه کدهای مرتبط
در این بخش سه مثال کاربردی را بررسی می‌کنیم:
مثال ۱: دو تصویر با موقعیت‌های مختلف
.element {
background:
url('image1.png') left top no-repeat,
url('image2.png') right bottom no-repeat;
}مثال ۲: ترکیب گرادیان و تصویر
.element {
background:
linear-gradient(to right, #ff7e5f, #feb47b),
url('pattern.png') repeat;
}مثال ۳: سه لایه با blend-mode
.element {
background:
url('texture.jpg') center/cover,
linear-gradient(45deg, rgba(255,0,0,0.3), rgba(0,0,255,0.3)),
#f5f5f5;
background-blend-mode: overlay, multiply;
}خلاصه درس
- لایه‌ها به ترتیب از بالا به پایین اعمال می‌شوند (اولین مقدار بالاترین لایه)
- می‌توانید برای هر لایه خصوصیات جداگانه مانند position، repeat و size تعریف کنید
- از کاما (,) برای جدا کردن مقادیر مختلف استفاده می‌شود
- در صورت نیاز به blend-mode، ترتیب لایه‌ها بسیار مهم است
- همیشه یک رنگ پس‌زمینه پایه به عنوان fallback در نظر بگیرید
با رعایت این نکات و استفاده صحیح از shorthand در CSS، می‌توانید طرح‌های پیچیده و جذابی ایجاد کنید که هم از نظر بصری تاثیرگذار باشند و هم از نظر کدنویسی بهینه شده باشند.
توسعه دهندگان
