در CSS، می‌توان چندین تصویر و رنگ را در پس‌زمینه یک عنصر ترکیب کرد تا جلوه‌های بصری جذابی ایجاد شود.

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

۱. نحوه ترکیب چندین پس‌زمینه در CSS

در CSS، می‌توان چندین مقدار را برای ویژگی background مشخص کرد و آن‌ها را با ویرگول (,) از هم جدا کرد.

✅ سینتکس کلی

background: تصویر1, تصویر2, رنگ;

🔹 قوانین مهم:

• تصویر اولی که مشخص می‌شود، در بالاترین لایه قرار می‌گیرد.
• تصویر دومی زیر لایه اول خواهد بود و همین‌طور ادامه دارد.
• آخرین مقدار معمولاً رنگ پس‌زمینه است که به‌عنوان لایه زیرین نمایش داده می‌شود.

۲. ترکیب چندین تصویر پس‌زمینه در CSS

✅ ۱. اضافه کردن دو تصویر پس‌زمینه

.box {
    width: 400px;
    height: 300px;
    background: url("pattern.png"), url("background.jpg");
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
}

🔹 نتیجه:
✅ تصویر pattern.png به‌عنوان الگوی تکرارشونده در بالاترین لایه قرار می‌گیرد.
✅ تصویر background.jpg به‌عنوان تصویر پس‌زمینه‌ی اصلی در پایین‌ترین لایه قرار می‌گیرد.
✅ تصویر دوم (background.jpg) کل پس‌زمینه را با cover پر می‌کند.

✅ ۲. ترکیب یک رنگ و یک تصویر در پس‌زمینه

.box {
    width: 400px;
    height: 300px;
    background: url("overlay.png"), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
    background-size: contain, cover;
    background-repeat: no-repeat, no-repeat;
}

🔹 نتیجه:
✅ تصویر overlay.png روی گرادیان نمایش داده می‌شود.
✅ گرادیان رنگی از نیمه شفاف به مشکی در پایین‌ترین لایه تنظیم شده است.

۳. ترکیب چندین گرادیان در پس‌زمینه

✅ ۱. ترکیب گرادیان خطی و گرادیان شعاعی

.box {
    width: 400px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
                linear-gradient(to right, blue, purple);
}

🔹 نتیجه:
✅ یک گرادیان دایره‌ای روشن در مرکز نمایش داده می‌شود.
✅ یک گرادیان خطی از آبی به بنفش در لایه زیرین قرار دارد.

۴. موقعیت‌دهی به چندین پس‌زمینه

هر پس‌زمینه می‌تواند موقعیت و اندازه مخصوص به خود را داشته باشد.

✅ ۱. تنظیم موقعیت و اندازه پس‌زمینه‌ها

.box {
    width: 400px;
    height: 300px;
    background: url("icon.png") no-repeat left top / 50px 50px,
                url("pattern.png") repeat center / 200px 200px,
                linear-gradient(to right, lightblue, darkblue);
}

🔹 نتیجه:
✅ تصویر icon.png در بالا-چپ قرار گرفته و اندازه آن ۵۰×۵۰ پیکسل است.
✅ تصویر pattern.png در مرکز عنصر نمایش داده شده و اندازه آن ۲۰۰×۲۰۰ پیکسل است.
✅ گرادیان از آبی روشن به آبی تیره در لایه زیرین قرار دارد.

۵. خلاصه‌نویسی برای پس‌زمینه‌های چندلایه‌ای

می‌توان تمام ویژگی‌های پس‌زمینه را در یک خط با استفاده از background shorthand تنظیم کرد.

✅ ۱. خلاصه‌نویسی چندین لایه پس‌زمینه

.box {
    background: 
        url("overlay.png") no-repeat center / contain, 
        url("pattern.png") repeat center / 100px 100px, 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5), black);
}

🔹 نتیجه:
✅ تصویر overlay.png در مرکز عنصر قرار می‌گیرد.
✅ تصویر pattern.png تکرار شده و اندازه آن ۱۰۰×۱۰۰ پیکسل است.
✅ گرادیان از نیمه شفاف به سیاه در لایه زیرین اعمال می‌شود.

۶. نتیجه‌گیری

✅ در CSS، می‌توان چندین تصویر و رنگ را به‌صورت لایه‌ای ترکیب کرد تا جلوه‌های بصری جذاب ایجاد شود.
✅ پس‌زمینه‌ها به‌ترتیب از بالا به پایین قرار می‌گیرند، یعنی اولین مقدار در background بالاترین لایه را تشکیل می‌دهد.
✅ هر لایه پس‌زمینه می‌تواند اندازه، موقعیت و تکرار خاص خود را داشته باشد.
✅ استفاده از background shorthand باعث خوانایی بهتر و کاهش حجم کد می‌شود.