View Categories

CSS арын давтамж

1 min read

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

Powered by BetterDocs

Leave a Reply