CSS арын давталт #
Үндсэн тохиргоогоор, background-image нь дүрсийг хэвтээ ба босоо байдлаар давтана.
Зарим зургийг зөвхөн хэвтээ эсвэл босоо байдлаар давтах ёстой, эс тэгвэл хачин харагдана.
body {
background-image: url("gradient_bg.png");
} Хэрэв дээрх зургийг зөвхөн хэвтээ байдлаар давтвал (background-repeat: repeat-x;),арын дэвсгэр нь илүү сайн харагдах болно
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
} Зөвлөгөө: Зургийг босоо байдлаар давтахын тулдbackground-repeat: repeat-y; тохируулна.
CSS арын дэвсгэр-давталт: давтахгүй #
Арын зургийг зөвхөн нэг удаа харуулахыг хүсвэлbackground-repeat ашиглана:
Арын зургийг зөвхөн нэг удаа харуулах:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
} Дээрх жишээнд дэвсгэр зургийг тексттэй ижил газарт байрлуулсан болно. Бид зурагны байрлалыг өөрчлөхийг хүсч байгаа бөгөөд ингэснээр текстэнд хэт их саад учруулахгүй байх болно.
CSS background-position #
background-position нь арын зургийн байрлалыг тодорхойлоход ашиглагддаг.
Арын зургийг баруун дээд буланд байрлуулах.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}