Өөрийн зургуудаа зурж, стиль дэх зургийг ашигла
Ихэнх хүмүүс текстийг тохируулах, фонт, өнгө, хэмжээ, илүү ихийг өөрчлөх CSS ашигладаг. Гэхдээ олон хүмүүс ихэнхдээ мартдаг нэг зүйл бол та CSS ашиглан дүрсийг ашиглаж болно гэсэн үг юм.
Image Өөрийгөө өөрчлөх нь
CSS нь танд зураг хэрхэн харагдахыг тохируулах боломжийг олгодог. Энэ нь таны хуудсыг тогтмол хадгалахад үнэхээр хэрэгтэй байж болох юм. Бүх зураг дээр стилийг тохируулснаар та өөрийн зурганд стандарт дүрсийг бий болгоно. Таны хийж болох зарим зүйлс:
- Зургийн эргэн тойронд зурах буюу тойм зур
- Холбогдсон зургуудыг тойрсон өнгөт зургийг аваарай
- Зургийн өргөн ба / буюу өндрийг тохируулах
- Сүүдрийн сүүдэр нэмнэ үү
- Зургийг эргүүлэх
- Зураг дээр харагдана
Өөрийн зургийг өгөх нь хилийн боомт эхлэхэд хамгийн тохиромжтой газар юм. Гэхдээ та зөвхөн хил хязгаараас хамаагүй илүү анхаарч үзээрэй. Ингэснээр таны зургийг бүхэлд нь авч үзэн, мөн захын хэмжээг тохируулна. Нимгэн хар өнгийн дүрс бүхий зураг нь гоё харагдаж байгаа ч хил хязгаар болон зурагны хоорондох зарим зөөллүүрийг бүр илүү сайн харах боломжтой.
img {
border: 1px хатуу хар;
padding: 5px;
}
Боломжтой бол гоёл чимэглэлийн бус зургийг үргэлж холбох нь зүйтэй юм. Гэсэн хэдий ч, ихэнх хөтөч нь зурагны эргэн тойронд өнгөт хил нэмдэг гэдгийг санаарай. Хэрвээ та дээр дурдсан кодыг ашиглавал хил хязгаарыг өөрчлөх боломжтой байсан ч гэсэн холбоос дээрээс хил хязгаарыг өөрчлөх эсвэл өөрчлөхгүй бол уг холбоосыг дарах болно. Үүнийг хийхийн тулд та CSS дүрмийг ашиглахдаа хилийн ойролцоох зургийг арилгах эсвэл өөрчлөхийн тулд ашиглах ёстой:
img> a {
border: none;
}
Мөн та зургийнхээ өндөр, өргөнийг өөрчлөх буюу засахын тулд CSS ашиглаж болно. Хэдийгээр татаж авах хурдны улмаас зурагны хэмжээг тохируулахын тулд браузер ашиглах нь тийм ч сайн санаа биш боловч зураг харуулахын тулд тэдгээрийг өөрчлөхийн тулд илүү сайн болж байна. Мөн CSS ашиглан та бүгдийн бүх зургийг стандарт өргөн буюу өндөрт тохируулж эсвэл чингэлэгтэй харьцуулах хэмжээг тохируулах боломжтой.
Зургийн хэмжээг өөрчлөхийн тулд хамгийн сайн үр дүнд хүрэхийн тулд зөвхөн нэг хэмжээ, өндөр буюу өргөнийг өөрчлөх хэрэгтэй. Энэ нь дүрсийг харьцангуйгаар нь дүрслэн харуулах бөгөөд энэ нь хачирхалтай биш юм. Өөр нэг утгыг автоматаар тохируулах эсвэл орхихын тулд хөтөчийг хэлэхийн тулд талбайн харьцаагаа тогтмол байлгах хэрэгтэй.
img {
өргөн: 50%;
өндөр: авто;
}
CSS3 нь объект тохирох болон объект-байршлын шинэ шинж чанаруудтай энэ асуудлыг шийдэж өгдөг. Эдгээр шинж чанаруудаар та яг тодорхой зураг, өндөр, талбайн харьцааг яаж зохицуулахыг тодорхойлж чадна. Энэ нь шаардлагатай зургийн хэмжээг тохируулахын тулд таны зураг, ургацын орчимд имэйлийн хайрцагны нөлөө үүсгэж болно.
CSS3 объект тохирох болон объект-байршлын шинж чанаруудыг одоогоор өргөнөөр хараахан дэмжиж чаддаггүй боловч таны зургийг өөрчлөхийн тулд ашиглаж болох ихэнх орчин үеийн хөтчүүдэд сайн дэмждэг бусад CSS3 шинж чанарууд байдаг. Сүүдэр сүүдэр, булангийн булан, хувиргах, эргүүлэх, хагалах, зураг зурах гэх мэт зүйлс ихэнхдээ орчин үеийн хөтөч дээр ажилладаг. Дараа нь зурах, эсвэл товшсон эсвэл цаг хугацааны дараа зургууд өөрчлөгдөхийн тулд CSS шилжилтийг ашиглаж болно.
Зургийн зургийг ашиглах нь
CSS нь таны зургуудаар сонирхолтой зургийг бүтээхэд хялбар болгодог.
Та бүхэлд нь хуудас эсвэл тусгай элемент рүү нэмж болно. Background-image өмчтэй хуудасны арын зураг үүсгэх нь хялбар байдаг:
body {
background-image: url (background.jpg);
}
Биет сонгон шалгаруулагчийг нэг элемент дээр тавихын тулд хуудсан дээрх тодорхой элементийг өөрчил.
Өөрөөр хэлбэл, зураг дээр хийж болох өөр нэгэн сонирхолтой зүйл бол ус хуудас шиг бусад хуудсуудтай гүйлгэдэггүй арын дэвсгэр зургийг үүсгэдэг. Зүгээр л стилийн суурь-хавсралтыг ашиглана: тогтмол бол; таны арын зурагтай хамт. Үндэслэлд зориулсан бусад тохируулгууд нь тэдгээрийг давхцал болон босоо байрлалтай болгохын тулд background-repeat property ашиглан ашиглана.
Дахин давтан бичих: repeat-x; Зургийг хэвтээ ба давталтыг дахин давтана: repeat-y; босоо байрлалд нь байрлуулна. Мөн та өөрийн арын зургийг суурь дэвсгэрийн байршлаар байрлуулж болно.
Мөн CSS3 таны дэвсгэртэнд илүү олон загварыг нэмдэг. Та өөрийн зургуудыг аль ч хэмжээтэй дэвсгэр дээр нь тохируулах эсвэл цонхны хэмжээгээр царайны зургийг тохируулах боломжтой . Та байрлалыг өөрчилж дараа нь арын зургийг хуулж болно. Гэхдээ CSS3-ийн хамгийн шилдэг зүйлүүдийн нэг бол одоо илүү олон нарийн нөлөөг үүсгэхийн тулд олон тооны арын зургийг давах боломжтой болсон юм.
HTML5 Style Images-д тусалдаг
HTML5 дахь ЗӨВХӨН элемент нь баримт бичигт ганцаараа зогсож чадах дурын зургуудыг байрлуулах ёстой. Үүнийг бодох нэг арга бол зургийг хавсралтад харуулбал энэ нь ЗУРГИЙН элемент дотор байх ёстой. Дараа нь та элемент болон FIGCAPTION элементийг өөрийн зурган дээрээ стилийг нэмэх боломжтой.