در طراحی وب، گاهی نیاز داریم چندین تصویر را به عنوان پس‌زمینه یک عنصر استفاده کنیم. CSS این امکان را با ویژگی background-image و مقادیر چندگانه فراهم می‌کند. این تکنیک برای ایجاد افکت‌های بصری پیچیده، الگوهای تکراری یا ترکیب تصاویر مختلف بسیار کاربردی است.
برای ترکیب چند تصویر پس‌زمینه، کافیست آدرس تصاویر را با کاما از هم جدا کنید. اولین تصویر در لیست، بالاترین لایه و آخرین تصویر، پایین‌ترین لایه خواهد بود. همچنین می‌توانید برای هر تصویر، موقعیت، اندازه و رفتار تکرار را به صورت جداگانه تعیین کنید.
کاربردهای عملی
ترکیب چند تصویر پس‌زمینه در موارد زیر کاربرد دارد:
- ایجاد افکت‌های لایه‌ای و عمق در طراحی
- ترکیب الگوهای تکراری با تصاویر اصلی
- اضافه کردن واترمارک یا لوگو به پس‌زمینه
- ساخت دکمه‌ها یا کارت‌های زیبا با جلوه‌های ویژه
نمونه کدهای مرتبط
در این بخش سه مثال کاربردی را بررسی می‌کنیم:
مثال ۱: ترکیب دو تصویر ساده
.element {
background-image: url('image1.jpg'), url('image2.png');
background-position: center center, top right;
background-repeat: no-repeat, repeat;
}مثال ۲: ترکیب گرادیان و تصویر
.element {
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('background.jpg');
background-size: cover;
}مثال ۳: ترکیب سه لایه مختلف
.element {
background-image: url('pattern.png'), url('overlay.png'), url('main-bg.jpg');
background-position: left top, center center, right bottom;
background-repeat: repeat, no-repeat, no-repeat;
background-size: auto, contain, cover;
}خلاصه درس
- ترتیب تصاویر مهم است - اولین تصویر بالاترین لایه خواهد بود
- می‌توانید برای هر تصویر خصوصیات جداگانه مانند position، repeat و size تعریف کنید
- ترکیب گرادیان‌ها با تصاویر برای افکت‌های نیمه شفاف بسیار مفید است
- از ترکیب تصاویر با حجم بالا خودداری کنید چون بر عملکرد صفحه تأثیر می‌گذارد
- همیشه مرورگرهای مختلف را تست کنید تا از سازگاری مطمئن شوید
با استفاده از این تکنیک‌ها می‌توانید طرح‌های پیچیده و جذابی ایجاد کنید. مهم است که بین زیبایی و عملکرد تعادل برقرار کنید و از تصاویر بهینه‌شده استفاده نمایید. تمرین و آزمایش با مقادیر مختلف به شما کمک می‌کند به نتایج حرفه‌ای دست یابید.
