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