با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. با معرفی CSS3 قابلیت ها و ویژگی های زیادی نسبت به نسخه های قبلی CSS معرفی شد که یکی از این ویژگی ها multiple background ( پس زمینه چندگانه در CSS ) می باشد. این ویژگی به شما امکان تعریف چند تصویر پس زمینه در CSS را می دهد. به این ترتیب شما می توانید تنها با استفاده از یک عنصر HTML از پس زمینه های مختلف که روی هم قرار دارند استفاده کنید، و حجم کد HTML شما نیز کاهش می یابد. برای آشنایی با چگونگی تعریف چند تصویر پس زمینه در CSS در ادامه ی این مبحث با ما همراه باشید.
در ادامه این آموزش طرز استفاده از ویژگی multiple background برای تعریف چند تصویر پس زمینه در CSS را ارائه کرده ایم.
CSS به شما اجازه می دهد تا با استفاده از ویژگی background-image
برای یک عنصر تصاویر پس زمینه متعدد تعریف کنید.
تصاویر پس زمینه چندگانه در CSS با کاما (,) از یکدیگر جدا شده و روی هم قرار می گیرند.
مثال زیر چگونگی استفاده از قابلیت multiple background برای تعریف چند تصویر پس زمینه در CSS را بخوبی نشان می دهد:
1 2 3 4 5 | #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } |
تصاویر پس زمینه چندگانه را هم می توان با خصوصیات انفرادی (همانند مثال فوق) مشخص کرد و هم می توان با همه را در یک خصوصیت کوتاه خلاصه کرد:
خصوصیات مثال فوق را در یک خصوصیت background
خلاصه می کنیم:
1 2 3 | #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; } |
با استفاده از خصوصیت background-size
می توانیم اندازه ی پس زمینه را مشخص کنیم.
اندازه ی پس زمینه را می توان بر حسب واحدهای اندازه گیری و یا درصد تعیین کرد.
همچنین می توان از دو مقدار contain
یا cover
نیز استفاده کرد.
در نمونه ی زیر اندازه ی تصویر پس زمینه از اندازه ی اصلی آن با برحسب پیکسل کوچکتر شده است.
مرجع آموزش و یادگیری کامپیوتر – دوره های آموزشی مختلف برنامه نویسی و طراحی سایت – آموزش نرم افزارهای کاربردی و گرافیکی و …
کد حالت فوق به صورت زیر خواهد بود:
1 2 3 4 5 | #div1 { background: url(img_flower.jpg); background-size: 100px 80px; background-repeat: no-repeat; } |
همچنین دو مقدار contain
و cover
برای خصوصیت background-size
تعریف شده است.
کلمه ی کلیدی contain
تصویر پس زمینه را بزرگ می کند (اما طول عرض آن را متناسب با عنصر در نظر می گیرد).
کلمه کلیدی cover
تمام سطح پس زمینه ی محتوا را با تصویر مربوطه می پوشاند.
مثال زیر عملکرد دو ویژگی contain
و cover
را به خوبی نشان می دهد:
1 2 3 4 5 6 7 8 9 10 | #div1 { background: url(img_flower.jpg); background-size: contain; background-repeat: no-repeat; } #div2 { background: url(img_flower.jpg); background-size: cover; background-repeat: no-repeat; } |
شما می توانید چندین مقدار مختلف را در خصوصیت background-size
برای تعیین اندازه پس زمینه های چندگانه وارد کنید.
در مثال زیر سه پس زمینه ی مختلف برای یک عنصر با اندازه های مختلف تعریف شده است:
1 2 3 4 | #example1 { background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; background-size: 50px, 130px, auto; } |
حالا می خواهیم یک تصویر پس زمینه داشته باشیم که تمام پنجره ی مرورگر را در تمام حالات پوشش دهد.
الزامات این کار عبارتند از:
در مثال زیر اینکار را با استفاده از عنصر <html> (این عنصر حداقل ارتفاع پنجره ی مرورگر است) انجام می دهیم.
سپس ویژگی background-size
را برای عنصر html تعریف می کنیم:
1 2 3 4 | html { background: url(img_man.jpg) no-repeat center fixed; background-size: cover; } |
شما همچنین می توانید از ویژگی های مختلف پس زمینه در یک عنصر <div> برای ایجاد یک تصویر hero (یک تصویر بزرگ با متن) استفاده کنید.
1 2 3 4 5 6 | .hero-image { background: url(img_man.jpg) no-repeat center; background-size: cover; height: 500px; position: relative; } |
ویژگی background-origin
مشخص می کند که تصویر پس زمینه در کجا موقعیت دهی شود.
این ویژگی سه مقدار مختلف را می گیرد:
مثال زیر عملکرد ویژگی background-origin
را به خوبی نشان می دهد:
1 2 3 4 5 6 7 | #example1 { border: 10px solid black; padding: 35px; background: url(img_flwr.gif); background-repeat: no-repeat; background-origin: content-box; } |
ویژگی background-clip
مشخص کننده منطقه نقاشی پس زمینه است.
این ویژگی سه مقدار زیر را شامل می شود:
مثال زیر عملکرد ویژگی background-clip
را به خوبی نشان می دهد:
1 2 3 4 5 6 | #example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; } |
خصوصیات پس زمینه در CSS:
ویژگی | توضیحات |
---|---|
background | یک ویژگی مختصر برای تنظیم تمام خواص پس زمینه در یک ویژگی |
background-clip | منطقه رنگی پس زمینه را مشخص می کند. |
background-image | یک یا چند تصویر پس زمینه برای یک عنصر را مشخص می کند. |
background-origin | موقعیت تصویر پس زمینه را مشخص می کند. |
background-size | اندازه ی تصویر پس زمینه را مشخص می کند. |
در مواردی که نیاز به تعریف پس زمینه های مختلف رو هم دارید ویژگی پس زمینه چندگانه در CSS بهترین گزینه برای این کار است، این قابلیت علاوه بر ارائه ی ویژگی تعریف چند تصویر پس زمینه در CSS اجازه ی تعیین جزیئاتی از جمله موقعیت ، اندازه و … را برای تصاویر پس زمینه ارائه می دهد.