وقتی صحبت از پس‌زمینه‌های CSS می‌شود، اغلب افراد تنها به یک تصویر یا رنگ فکر می‌کنند. اما آیا می‌دانستید که در CSS می‌توانید چندین پس‌زمینه را هم‌زمان برای یک عنصر تعریف کنید؟ بله، این ویژگی از CSS3 به بعد ارائه شده و می‌تواند جلوه‌های زیبایی به وب‌سایت شما اضافه کند. بیایید به بررسی این موضوع بپردازیم و ببینیم چگونه می‌توان از این ویژگی استفاده کرد.
چگونه چندین پس‌زمینه ایجاد کنیم
برای افزودن چندین پس‌زمینه در CSS، از خاصیت background استفاده می‌کنیم. ارزش‌های مختلفی که می‌خواهیم به پس‌زمینه‌ها اختصاص دهیم، با کمک کاما جدا می‌شوند. این کار به ما امکان می‌دهد تا ترکیبی از تصاویر و رنگ‌ها را برای یک عنصر تنظیم کنیم.
سازگاری مرورگرها
در گذشته، یکی از مواردی که باید در نظر می‌گرفتیم، سازگاری مرورگرها بود. البته در حال حاضر، بیشتر مرورگرهای مدرن از این ویژگی پشتیبانی می‌کنند. با این حال، همیشه بهتر است که تست‌هایی را برای مرورگرهای مختلف انجام دهیم تا مطمئن شویم همه چیز به درستی نمایش داده می‌شود.
کاربردهای واقعی
در کاربردهای واقعی، می‌توانید از این ویژگی برای ایجاد بافت‌های جالب، سایه‌ها یا حتی اضافه کردن افکت‌هایی مانند پوشش‌های نیمه‌شفاف روی تصاویر استفاده کنید. این کار می‌تواند به ظاهر وب‌سایت شما عمق بیشتری بدهد و تجربه کاربری بهتری را ارائه کند.
.multiple-backgrounds {
background: url('background1.jpg') no-repeat top left,
url('background2.png') no-repeat bottom right;
background-color: #abcdef;
}
توضیح کد
.multiple-backgrounds - این کلاس CSS است که چندین پس‌زمینه برای آن تعریف شده است.
background - خاصیتی برای تعریف پس‌زمینه، که در این مثال دو تصویر و یک رنگ را به‌صورت هم‌زمان تنظیم کرده‌ایم.
url('background1.jpg') - اولین تصویر پس‌زمینه‌ای که در بالای عنصر قرار می‌گیرد.
url('background2.png') - دومین تصویر پس‌زمینه‌ای که در پایین عنصر قرار می‌گیرد.
background-color: #abcdef; - رنگ پس‌زمینه که در زیر تصاویر مشاهده می‌شود.