CSS images

CSS Images

Вебсайтад зураг оруулах

CSS зураг нь таны вэб сайтыг амь оруулдаг гол хүчин зүйл.

Энэ бүлэгт бидний хийж сурах зүйлс

  • зургийн хэмжээг CSS -ээр удирдах, зураг голлуулах.
  • Зураг оруулахын тулд img тагийн src attribute дээр зураг байгаа газрын замыг зааж өгнө.
  • alt attribute дээр юуны тухай зураг болохыг бичиж өгснөөр зургийн зам олдохгүй үед тайлбар хэлбэрээр гарна.
  • background зураг оруулах

Зургийн хэмжээг өөрчлөхдөө css - width(өргөн), height(урт) гэдэг properties ашиглана.

Зургийг төвлүүлэх.
  • Бид css дээрээ margin: 0px auto; гэснээр хэвтээ тэнхлэгийн дагуу зургийг голлуулж байгаа юм.
  • text-align: center; нь бичиглэлийг(text) голуулж байрлуулна.

margin: 0px auto:

text-align: center;

Background image(Дэвсгэр зураг)

  • backround-image property нь HTML элементийн ард зураг байрлуулах боломжийг олгодог.
  • Бүтэн нүүр болон нүүрний нэг хэсэгт дэвсгэр зураг өгч болно.
  • CSS- ээр өгсөн зураг өөрийгөө давтаж box(хайрцаг)-ийг дүүргэдэг.
background-size property нь зургийг ямар байдлаар харагдуулахыг хариуцдаг бөгөөд утгууд нь contain, cover байна.
  • Contain утга нь зургийг хэмжээгээр нь HTML элементийн талбайг дүүртэл тухайн зургаа давтана.
  • Харин cover утга нь Тухайн зургийг давтахгүйгээр томоор дүүргэж харуулна.
background-repeat property нь дараах утгуудыг авна.
  • repeat
      backround-image-ийг босоо болон хэвтээ тэнхлэгийн дагуу давтана.
  • no-repeat
      зураг ганц удаа харагдана.
  • repeat-x
      зөвхөн хэвтээ тэнхлэгийн дагуу давтана.
  • repeat-y
      зөвхөн босоо тэнхлэгийн дагуу давтана.
Дэвсгэр зураг нэг газраа тогтмол үлдэх мөн хэрэглэгч хуудсыг дээш доош гүйлгэх үед энэ утгуудыг background-attachment property дээр авна.
  • fixed
  • fixed
background-position property
Жишээ харцгаая
background-size: cover;

Summary - Дүгнэлт

  • Та CSS ашиглан зургийн хэмжээг зааж өгч болно.
  • Энэ нь та өөрийн сайтын хэд хэдэн хуудсан дээр ижил хэмжээтэй зураг ашиглахад маш их тустай.
  • CSS ашиглан зургийг хэвтээ болон босоо байдлаар зэрэгцүүлж болно.
  • Та page-ийн аль ч элементийн , box-ийн ард дэвсгэр зургийг ашиглаж болно.
  • background image нь хайрцагны арын хэсэгт нэг удаа эсвэл давтагдан гарч болно.