CSS Дэвсгэр /Backgrounds/
CSS-н арын дэвсгэрийг Background property шинж чанарт тодорхойлдог.
CSS-д Background property буюу дэвсгэрийн шинж чанарыг дараах бүлэгт хуваадаг
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS Background-color
background-color шинж чанарт элементийн дэвсгэр өнгийг зааж өгнө.
HTML элемент тус бүрд дэвсгэр өнгө зааж өгч болно.
Жишээ нь
<style>
body {
background-color: Violet;
}
h1 {
background-color: orange;
}
div {
background-color: green;
}
p {
background-color: yellow;
}
</style>
CSS Background-image
Элементийн арын дэвсгэр зургийг background-image шинж чанарт зааж өгнө.
Жишээ нь
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/bgimg.jpg");
}
</style>
Зөвлөмж: Арын дэвсгэр зургийг зөв сонгохгүй бол текстийн харагдах байдлыг алдагдуулдаг.
CSS Background-repeat
background-image -н анхны утга нь хэвтээ болон босоо тэнхлэгт давтсан байдаг.
Жишээ нь
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/bgrep.png");
}
</style>
Зарим тохиолдолд зөвхөн хэвтэй эсвэл босоо тэнхлэгт давтвал илүү тохиромжтой байдаг. Энэ тохиолдолд background-repeat: repeat-x; гэж зааж өгнө.
Жишээ нь
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/bgrep.png");
background-repeat: repeat-x;
}
</style>
Жишээ нь
Босоо буюу y тэнхлэгт давтаж үзвэл.
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/bgrepy.png");
background-repeat: repeat-y;
}
</style>
CSS Background-repeat: no-repeat
Дэвсгэр зургийг давталтгүй харуулах боломжтой. background-repeat-д no-repeat шинж чанарыг зааж өгнө.
Жишээ нь
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/sheep.jpg");
background-repeat: no-repeat;
}
</style>
Дээрх жишээнд дэвсгэр зураг болон текст нь давхардсан байрлалтай тул текстийг уншигдахад төвөгтэй байна. Тэгвэл дэвсгэр зургийн байршлыг зааж өгч болно.
CSS Background-position
background-position шинж чанарт дэвсгэр зургийн байрлалыг зааж өгнө.
Жишээ нь
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/sheep.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
}
</style>
CSS Background Attachment
background-attachment шинж чанарт дэвсгэр зураг fixed буюу тогтмол, scroll буюу гүйдэг байхыг зааж өгнө.
Жишээ нь
fixed шинж чанарыг ашиглаж үзье
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/sheep.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
background-attachment: fixed;
}
</style>
Жишээ нь
scroll шинж чанарыг ашиглаж үзье
<style>
body {
background-image: url("http://www.abcd.mn/static/csss/sheep.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 250px;
background-attachment: scroll;
}
</style>
CSS Background Shorthand
Кодын бичиглэлийг багасгахын тулд өмчид нь бүх үдсэн шинж чанарыг зааж өгч болно. Үүнийг Shorthand гэж нэрлэнэ.
Жишээ нь
background-н бүх үндсэн шинж чанарыг background-д зааж үзье
<!DOCTYPE html lang="en-US">
<html>
<head>
<style>
body {
background: orange no-repeat right top url("http://www.abcd.mn/static/csss/sheep.jpg");
margin-right: 250px;
}
</style>
</head>
<body>
<h1>Монголын Үхэр, Хонины мах нь дэлхийд №1</h1>
<p>Монголын таван хошуу мал нь жилийн 4-н улиралд онгон байгальд бэлчиж эмийн уургамлаар хооллодог тул амт шимт сайтай дэлхийд хаана ч байхгүй хамгийн шилдэг нь юм. Монголчууд бид хувьтай улс, онгон байгалаа хамгаалах үүрэгтэй улс юм</p>
</body>
</html>
Сэтгэгдэлүүд
