CSS Orqa fon

CSS Orqa fon


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:

O'zingni Sinab Ko'r
body {
    background-color: lightblue;
}

O'tgan darsimizda aytganimizdek, CSSda ranglar quuyidagicha e'lon qilinadi.

  1. Rangning o'zining nomi bilan - masalan "red"
  2. RGB ning qiymati orqali - masalan "rgb(255, 0, 0)"
  3. Rangning 16 lik sanoq sistemasidagi qiymati orqali - masalan "#2196F3"

Quyidagi misolda h1, div va p elementlariga turli xil orqa fonlarni o'rnatamiz.

Namuna:

O'zingni Sinab Ko'r
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:

O'zingni Sinab Ko'r
body {
    background-image: url("keepgoing.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:

O'zingni Sinab Ko'r
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Bundan tashqari, rasmni joylashuvga ko'ra e'lon qilsa ham bo'ladi:

Namuna:

O'zingni Sinab Ko'r
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Background Attachment

background-attachmentning 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.

Namuna:

 body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Background - "Shorthand"ning qiymatlari quyidagi tartibda beriladi:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017