CSS fonlar
CSS ko‘p qavatli fonlar
CSS background-image xossasi orqali element uchun bir nechta fon rasmlari qo‘shish imkonini beradi.
Har xil fon rasmlari vergul bilan ajratiladi va rasmlar bir-biri ustiga taxlanadi — birinchi rasm tomoshabinga eng yaqin bo‘ladi.
Quyidagi misolda ikkita fon rasmi bor: birinchi rasm — gul (o‘ng-pastga tekislangan), ikkinchi rasm — qog‘ozga o‘xshash fon (chap-yuqori burchakka tekislangan):
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Misol
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
O‘zingiz sinab ko‘ring »
Bir nechta fon rasmlari yakka fon xossalari (yuqoridagi kabi) yoki background qisqartma xossasi bilan belgilanishi mumkin.
Quyidagi misol background qisqartma xossasidan foydalanadi (yuqoridagi misol bilan bir xil natija):
Misol
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
O‘zingiz sinab ko‘ring »
CSS ilg‘or fon xossalari
| Xususiyat | Tavsif |
|---|---|
| background | Barcha background xossalarini bitta deklaratsiyada belgilash uchun qisqartma xossa |
| background-clip | Fonning bo‘yash maydonini belgilaydi |
| background-image | Element uchun bir yoki bir nechta fon tasvirini belgilaydi |
| background-origin | Fon rasmi(lari) qayerda joylashishini belgilaydi |
| background-size | Fon rasm(lar)ining o‘lchamini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!