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;
}