پس زمینه چندگانه در CSS (Multiple Backgrounds)
با «پس زمینه چندگانه (Multiple Backgrounds)» می توانید چند تصویر پس زمینه را هم زمان روی یک عنصر قرار دهید. تصاویر با کاما جدا می شوند و از بالا به پایین روی هم چیده می گردند؛ تصویر اول نزدیک ترین لایه به کاربر است.
افزودن چند تصویر با background-image
برای تعریف چند تصویر از ویژگی background-image
استفاده کنید و برای هر تصویر، موقعیت و تکرار متناظر را با ترتیب یکسان تعیین کنید.
#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
نوشتار میان بُر پس زمینه
همین نتیجه با ویژگی میان بُر background
نیز ممکن است. ترتیب مقادیر هر لایه باید یکی باشد.
#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }
ویژگی های پیشرفته پس زمینه
background
: میان بُر همه ویژگی های پس زمینه.background-clip
: ناحیه رنگ آمیزی پس زمینه.background-image
: یک یا چند تصویر پس زمینه.background-origin
: مبدأ جای گذاری تصویر.background-size
: اندازه تصاویر پس زمینه.
نکته: برای هر لایه، مقادیر background-position
و background-repeat
را با همان ترتیب لایه ها بنویسید تا کنترل کامل داشته باشید.
هشدار: استفاده زیاد از تصاویر بزرگ می تواند سرعت بارگذاری را کاهش دهد؛ بنابراین ابتدا کیفیت و اندازه فایل ها را بهینه کنید.
ادامه مطالعه
برای تکمیل موضوع، صفحه تصاویر کادر و تنظیم اندازه در background-size را ببینید. همچنین از راهنماهای مرجع background-image در MDN و background (میان بُر) در MDN استفاده کنید. برای دسترسی سریع، لینک پس زمینه چندگانه را ذخیره کنید.