آموزش استفاده از پس زمینه های چندگانه توسط CSS3

همانطور که میدانید توسط CSS شما میتوانید یک پس زمینه برای عنصر مورد نظر خود قرار دهید. محدودیتی که در گذشته در CSS وجود داشت این بود که برای هر عنصر فقط یک پس زمینه میتوانستید قرار دهید و چنانچه نیاز به قرار گرفتن چند تصویر پس زمینه روی یکدیگر بود، باید از روش های غیر متعارف دیگر استفاده می شد. اما اکنون CSS3 به شما این امکان را می دهد که برای هر عنصر از چند پس زمینه استفاده نمائید. در این آموزش نحوه استفاده از Multiple Backgrounds را به شما نشان خواهم داد.

پس زمینه چندگانه با CSS

در گذشته چنانچه برای بخشی از سایت به چند پس زمینه بر روی یکدیگر نیاز داشتیم، باید با استفاده از ساختارهای تودرتو در HTML و اضافه کردن کلاس های متعدد در CSS اینکار را انجام میشد. نتیجه معمولا کدهای نه چندان دلچسب و نا مرتب بود که در بهترین حالت چیزی شبیه تکه کد زیر بود :

.overcast1 {
	background-image: url("images/overcast.png");
	background-position: 150px 25px;
}
.rainbow {
	background-image: url("images/rainbow.png");
	background-position: 200px 10px;
}
.overcast2 {
	background-image: url("images/overcast.png");
	background-position: 250px 25px;
}
.sunny {
	background-image: url("images/sunny.png");
	background-position: 100px 10px;	
}

وجود کدهای اضافه در مدل بالا کاملا مشهود است. اما اکنون به لطف CSS3 تمامی ساختار بالا در یک خاصیت background-image و تنها با یک کلاس قابل پیاده سازی است:

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  background-image: url("images/overcast.png"),
			  url("images/rainbow.png"), 
			  url("images/overcast.png"), 
			  url("images/sunny.png");
  background-position: 150px 25px, 
			  200px 10px, 
			  250px 25px, 
			  100px 10px;
  background-repeat: no-repeat;
}

در این کد ما چهار تصویر با موقعیت های مکانی متفاوت را در پس زمینه یک عنصر قرار دادیم. نتیجه به صورت زیر خواهد بود :

پس زمینه های روی هم CSS

نظرات (1) -

  • Mohammad

    03/14/1394 05:13:17 ب.ظ | پاسخ به این نظر

    سلام لطفا دمویی از کارایی این دستور اجرا کنید

Loading