Xurmatli Web sahifani sabr bilan hamma html darslarini o'qib o'rgangan yurtdoshlar, barchangizga tashakkurimni bildiraman. Sizlarni tabriklasam ham bo'ladi sizlar juda muhim bo'lgan bosqichni o'tib bo'ldingiz



Yüklə 68,31 Kb.
səhifə4/8
tarix09.05.2022
ölçüsü68,31 Kb.
#56848
1   2   3   4   5   6   7   8
CSS bo\'yicha qo\'llanma.

background-repeat: repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: no-repeat;

background-attachment - bu propertyni misol uchun body tagi uchun ishlatdingiz, va siz orqa fon rasmini web sahifa matni bilan birgalikda yuqori va quyi qismiga (sichqoncha roligi yordamida) harakatlanishini yoki harakatlanmasligini belgilashingiz mumkin bo'ladi. Bu property faqat background-image:url(rasm.jpg); ishlatilgandagina ishlatish mumkin bo'ladi, chunki o'zi yo'q fonni qando harakatlantiramiz, agar ishlatmasangiz orqa fon matn bilan birgalikda harakatlanadi.

  • background-attachment:scroll; - scroll pastga va tepaga harakatlantirish degan ma'noni beradi va bu qiymat default qiymatdir, ishlatmasangiz ham rasm matn bilan birga harakatlanadi.

  • background-attachment:fixed; - fixed qat'iy belgilangan degan ma'noni beradi, ya'ni siz bu qiymat yordamida orqa fon rasmini harakatlantirmasligingiz mumkin bo'ladi.

background-position - bu property bizga orqa fon rasmimizni joylashuv o'rnini belgilaydi va faqat rasm yuklatilinganda va background-repeat: no-repeat; bilan birga ishlatilinadi, chunki bu qiymat rasmning asl o'zini beradi. Qiymatlari quyida ko'rsatilingandir:

  • background-position: x% y%; - x va y larning o'rnida ixtiyoriy son bo'lishi mumkin faqat foiz qiymatida, birinchi yozilgan qiymat gorizontal ya'ni x o'qi yo'nalishida hisoblanadi va chap tarafga nisbatan rasmni qancha foiz qilib ko'rsatilinsa o'shancha uzoqlashadi, y esa orqa fonimizni yuqoriga nisbatan uzoqlashtiradi. Foiz belgisi (%) qo'yilishi shart aks holda pixel o'lchamda hisoblab yuboradi. Birinchi chap tarafdan gorizontal uzoqlashtirish qiymati (x%) keyin esa yuqoridan vertikal (y%) uzoqlashtirish qiymati yoziladi va ular orasida joy tashlanishi kerak (x%_y%). Quyida (a) misolda background-position: 10% 20%; qilib olingandir to'liq CSS kodi:
    .a {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: 10% 20%; }

  • background-position: x y; - x va y larning o'rnida ixtiyoriy son bo'lishi mumkin faqat pixel qiymatida, birinchi yozilgan qiymat gorizontal ya'ni x o'qi yo'nalishida hisoblanadi va chap tarafga nisbatan rasmni qancha pixel qilib ko'rsatilinsa o'shancha uzoqlashadi, y esa orqa fonimizni yuqoriga nisbatan uzoqlashtiradi. Pixel belgisi (px) qo'yilishi shart emas. Birinchi chap tarafdan gorizontal uzoqlashtirish qiymati (x) keyin esa yuqoridan vertikal (y) uzoqlashtirish qiymati yoziladi va ular orasida joy tashlanishi kerak (x_y). Quyida (b) misolda background-position: 10 20; qilib olingandir ya'ni chap tarafda 10 pixel yuqoridan esa 20 pixel joy tashlash uchun buyruqdir, bu qoidani ba'zi browserlar o'qimaydi, to'liq CSS kodi:
    .b {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: 10 20; }

  • background-position: left top; - chap-yuqori degan tarjimaga ega ya'ni orqa fonimizni chap va yuqoriga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (left_top). Bu qiymat yozilmasa ham bo'ladi chunki bu qiymat default qiymat hisoblanadi. Quyida (c) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .c {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: left top; }

  • background-position: left center; - chap-markaz degan tarjimaga ega ya'ni orqa fonimizni chap va markazga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (left_center). Quyida (d) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .d {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: left center; }

  • background-position: left bottom; - chap-quyi degan tarjimaga ega ya'ni orqa fonimizni chap va quyi qismga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (left_bottom). Quyida (e) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .e {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: left bottom; }

  • background-position: right top; - o'ng-yuqori degan tarjimaga ega ya'ni orqa fonimizni o'ng tarafga va yuqoriga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (right_top). Quyida (f) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .f {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: right top; }

  • background-position: right center; - o'ng-markaz degan tarjimaga ega ya'ni orqa fonimizni o'ng tarafga va markazga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (right_center). Quyida (g) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .g {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: right center; }

  • background-position: right bottom; - o'ng-quyi degan tarjimaga ega ya'ni orqa fonimizni o'ng taraf va quyi qismga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (right_bottom). Quyida (h) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .h {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: right bottom; }

  • background-position: center top; - markaz-yuqori degan tarjimaga ega ya'ni orqa fonimizni markazda yuqoriga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (center_top). Quyida (i) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .i {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: center top; }

  • background-position: center center; - markaz-markaz degan tarjimaga ega ya'ni orqa fonimizni gorizontal va vertikal yo'nalish bo'yicha markazda qilib belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (center_center). Quyida (j) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .j {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: center center; }

  • background-position: center bottom; - markaz-quyi degan tarjimaga ega ya'ni orqa fonimizni markazga va quyi qismga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (center_bottom). Quyida (k) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
    .k {
    background-image:url(002.jpg);
    background-repeat:no-repeat;
    background-position: center bottom;}


Yüklə 68,31 Kb.

Dostları ilə paylaş:
1   2   3   4   5   6   7   8




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©azkurs.org 2024
rəhbərliyinə müraciət

gir | qeydiyyatdan keç
    Ana səhifə


yükləyin