CSS da orqa fon bilan ishlash
CSS da asosiy fon va orqa fon uchun javob beradigan stil xususiyatlari quyidagilardan iborat:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Bu stil xususiyatlarini birma-bir ko'rib chiqamiz.
Background-color
Background-color - biror elementni yoki butun veb sahifani orqa foniga rang berishni ifodaylaydi va quyidagicha qo'llanniladi.
Namuna:
body {
background-color: lightblue;
}
O'tgan darsimizda aytganimizdek, CSSda ranglar quyidagicha e'lon qilinadi.
Rangning o'zining nomi bilan - masalan "red"
RGB ning qiymati orqali - masalan "rgb(255, 0, 0)"
Rangning 16 lik sanoq sistemasidagi qiymati orqali - masalan "#2196F3"
Quyidagi misolda h1, div va p elementlariga turli xil orqa fonlarni o'rnatamiz.
Namuna:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Background-image
Background-image - orqali istalgan elementni yoki butun veb sahifani foni sifatida rasm qo'yish mumkin. U quyidagicha e'lon qilinadi.
Namuna:
body {
background-image: url("tutorials.jpg");
}
Siz shunday rasm tanlashingiz kerakki, u foydalanuvchilarga halaqit qilmasin, matnlarni o'qishda ham qiyinchilikka duch kelmasin.
Orqa fonning takrorlanishi
Siz rasmni biror veb sahifaga o'rnatganizdan keyin, xohlaysizmi yo yo'qmi, u rasm gorizontaliga va vertikaliga takrorlanadi.
Bu degani siz ekran o'lchamidan kichkina rasm tanlasangiz ham, ekran to'ldirguncha takrorlanadi.
Buni oldini olish maqsadida x o'qi bo'yicha yoki y o'qi bo'yicha takrorlanadigan qilib o'zimiz sozlashimiz mumkin.
Namuna:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Bundan tashqari, rasmni joylashuvga ko'ra e'lon qilsa ham bo'ladi:
Namuna:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Background Attachment
background-attachment ning - qiymati orqali rasmning o'rnini oldindan belgilangan joyga o'rnatiladi.
Namuna:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Background - Shorthand
Background - Shorthand orqali rasmning bir nechta qiymatlarini, bir vaqtning o'zida kiritishimiz mumkin. Shorthandni ma'nosi qisqa qilib aytganda qisqa usul, oson yo'l deb tushunishingiz mumkin.
Namuna:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Background - "Shorthand"ning qiymatlari quyidagi tartibda beriladi:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Tutorials.uz - telegram kanali O'zbekiston bo'ylab bepul dasturlash darslarini ishlab chiquvchi holis kanal.