хөтчийн цонхны өргөнөөс хоёр дахин их байх болно. Түүнд байрлуулсан зураг нь пропорцоо хадгалж, хөтчийн цонхыг бүрэн бүрхэж, яг төвд байрлуулна.

#bg (байрлал:тогтмол; дээд:-50%; зүүн:-50%; өргөн:200%; өндөр:200%; ) #bg img (байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; баруун: 0; доод: 0: автомат; мин-өргөн: 50%;

Ажилладаг:

Safari / Chrome / Firefox (бүх хувилбар дээр туршиж үзээгүй боловч сүүлийн хувилбаруудад сайн ажилладаг).

IE 8+.

Opera (ямар ч хувилбар) болон IE нь энэ аргаар ажиллахаас татгалздаг (зургийн байрлал буруу байна).

jQuery ашиглаж байна

Зургийн харьцаа (шугам элемент.) байвал санаа нь маш энгийн дэвсгэр болгон ашиглах болно) нь хөтчийн цонхны харьцаатай харьцуулагдана. Хэрэв энэ нь зургийн хувьд жижиг бол та оноох хэрэгтэй зөвхөнЗургийн width шинж чанарыг 100% гэж тохируулсан бөгөөд энэ нь дэлгэцийг өндөр болон өргөнөөр дүүргэх болно. Хэрэв илүү бол оноож өгнө үү зөвхөнЗургийн өндрийн шинж чанарыг 100% гэж тохируулсан.

#bg (байрлал: тогтмол; дээд: 0; зүүн: 0; ) .bgwidth ( өргөн: 100%; ) .bgheight ( өндөр: 100%; )

$(функц() ( var theWindow = $(цонх), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); функц resizeBg() ( if ((theWindow) .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Ажилладаг:

IE7+ (тавцуутай, IE6 дээр ажиллах магадлалтай)

Бусад бүх хөтөч дээр.

Дүгнэлт

Шийдлийн арга бүр өөрийн гэсэн давуу болон сул талуудтай. Та зөвхөн тодорхой тохиолдолд тохирохыг нь сонгох хэрэгтэй. За, эсвэл өөрийнхөөрөө санал болго.

Сайн уу! Таны даруухан үйлчлэгч таньтай цахим хуудасны суурь дэвсгэрийг хэрхэн тохируулах талаар хэрэгтэй, практик материалын нэг хэсэгтэй холбогдож байна. Энэ бол html зохион байгуулалтын хамгийн эхлэл бөгөөд энд би интернетийн хэрэглэгчдийн анхаарлыг татахуйц сайтын арын дэвсгэрийг хэрхэн сайхан болгож болохыг жишээгээр харуулах болно.

Хэрэв та анзаарсан бол ихэнх онлайн бизнес эрхлэгчид борлуулалт, захиалгын хуудсандаа өвөрмөц дэвсгэр ашигладаг. Өнөөдөр бид энэ үйл явцын техникийн бүрэлдэхүүн хэсэгт дүн шинжилгээ хийх болно.

Тиймээс эхлээд бидэнд мэдээж зураг хэрэгтэй. Гадаадын интернетэд янз бүрийн зүйлийг татаж авах боломжтой маш сайн сайт байдаг вэб сайтын дэвсгэр зураг. Тэнд тэдний асар их тоо байдаг. Сайтыг Нарийн хэв маяг гэж нэрлэдэг.

Энэ нь Google хайлтын системийн жагсаалтад эхний байранд гарч ирдэг тул би үүнийг ажилд ашиглахыг зөвлөж байна. Хэрэв та хайлтын системд "арын зургийн загвар", "сайтын дэвсгэр зургийг татаж авах" гэх мэт зүйлийг бичвэл бусад олон тооны сайтуудыг олох боломжтой.

Хэрэв танд англи хэл дээр асуудал байхгүй бол та үүнийг төвөггүй ойлгох болно.

Энэ нийтлэлд би сэдвийг сонгосон бөгөөд үүнийг Твид гэж нэрлэдэг. Та татаж авч болно.

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

Эхлээд програмд ​​шинэ баримт бичгийг үүсгэ

Мөн засварлахаасаа өмнө нэрийн дор хадгалахаа мартуузай, жишээ нь индекс.htmlКомпьютер дээр хавтас үүсгэх, жишээлбэл, та "Миний сайт" хавтас үүсгээд манай индекс файлыг (index.html) байрлуулж, хөтчийг төөрөгдөлд оруулахгүйн тулд англи хэл дээр хавтас үүсгэх нь дээр мөн сайтыг буруу харуулах.

Нэмж дурдахад, "миний сайт" гэсэн үндсэн хавтсанд та өөр хоёр дэд хавтас үүсгэх хэрэгтэй бөгөөд нэгд нь бид бүх зургуудаа байрлуулж, "зураг" гэж нэрлэнэ, нөгөөг нь "CSS" гэж нэрлэнэ (каскадын хэв маяг). хуудас) болон файлыг тэнд байрлуул style.css

Одоо бид баримт бичиг дээрээ ажиллах боломжтой. Дараагийн алхам бол бүх зүйл эхэлдэг үндсэн хүрээ гэж нэрлэгддэг хоосон HTML кодыг оруулах явдал юм. Та шууд татаж авах боломжтой. Дараа нь бид энэ файлаас бүгдийг хуулж, програмынхаа файл руу шилжүүлэх болно. Эцсийн үр дүн нь дараах байдалтай байх ёстой

Файлын нэрний хажууд улаан уян диск харагдах болно. Хэрэв улаан өнгөтэй бол энэ нь файл хадгалагдаагүй гэсэн үг бөгөөд хадгалах товчийг дарж уян диск цэнхэр өнгөтэй болно.

Гарчгийн шошгон дээр та баримт бичгийн гарчгийг өөрчилж болно, жишээлбэл "Миний анхны вэб хуудас" болгож болно. Мөн таны хуудсыг кодчилолд хадгалсан эсэхийг шалгаарай UTF-8

Үгүй бол, хэрэв өөр кодчилол байгаа бол, жишээ нь windows-1251, хөтөч дээрх баримт бичгийн текстийг иероглифээр харуулах болно. Та програмын хэрэгслийн самбар дээрх "Encodings - Encode in Utf-8 (BOM-гүй)" хэсэгт кодчилолыг өөрчилж болно.

Мөн бидний хийсэн үйлдэл бүрийг хадгалахаа бүү мартаарай.

Одоо баримт бичигтээ дэвсгэр үүсгэж эхэлцгээе. Вэб хуудасны дизайнтай холбоотой бидний бүх үйлдлүүд CSS гэж нэрлэгддэг каскадын загварын хүснэгтүүдийг ашиглан хийгдэх болно, өөрөөр хэлбэл бид html дээр хүрээ үүсгэж, үүнийг ашиглан үзэсгэлэнтэй загвар, дүр төрхтэй болгоно гэдгийг би шууд хэлье. CSS.

Ингэснээр та үйлдлийн зөв дараалалд өөрийгөө дасгах болно. Та html баримт бичигт хэв маягтай харьцах ёсгүй; тэдгээрийг тусдаа баримт бичигт оруулах нь дээр.

Үүнийг хийхийн тулд манай Notepad++ программ дээр бид өөр файл үүсгэж, Style.css гэж нэрлээд "Миний сайт" хуваалцсан хавтсанд байрлах шинэ css хавтсанд хадгална.

Агуу их! Манай хөтөч хуудсыг зөв харуулахын тулд бид загварын хуудсыг html баримт бичигтэйгээ холбох хэрэгтэй. Үүнийг хэрхэн хийснийг энд харуулав

Бид дээрх бүх мөрийг шууд оруулна. Энэ шугамаар бид загварын хуудсыг холбодог.
Одоо бид загварын хүснэгтээр дамжуулан биеийн шошгоны дэвсгэр зургийг тодорхойлох болно. Үүнийг хийхийн тулд бид style.css баримт бичигт дараах бүтцийг үүсгэнэ (зүгээр л үүнийг аваад програмын кодонд бичнэ үү)

Энд жаахан тайлбарлая. Арын шинж чанар нь олон утгатай бөгөөд тэдгээрийн нэг нь вэб баримт бичигт бидний дэвсгэр зургийг сунгах үүрэгтэй background-repeat юм.

ДАВТАЛТ:

REPEAT //(хэвтээ ба босоо байдлаар сунгах) REPEAT-X // (зөвхөн хэвтээгээр сунгах) REPEAT-Y //(зөвхөн босоогоор сунгах) NO-REPEAT //(арын дэвсгэр зургийг давтахгүй)

Манай тохиолдолд бид жижиг зургаа босоо болон хэвтээ байдлаар хуулбарладаг. Үүний үр дүнд хуудас бүхэлдээ бидний зургаар дүүрсэн. Энэ нь хөтөч дээр иймэрхүү харагдаж байна:

Би бас танд зориулж сайтын гоёмсог дэвсгэрийг татаж авах боломжтой сайтуудыг сонгон хийсэн

Зохиогчоос:Бүгдээрээ сайн уу. Дэвсгэр өнгө, зураг нь вэб дизайнд асар их үүрэг гүйцэтгэдэг тул ямар ч элементийг илүү сэтгэл татам байдлаар зохион бүтээх боломжийг олгодог. Өнөөдөр бид HTML дээр дэвсгэр зургийг хэрхэн хийх талаар авч үзэх болно.

Арын дэвсгэрийг тохируулахын тулд HTML ашиглах боломжтой юу?

Би шууд үгүй ​​гэж хэлье. Ерөнхийдөө html нь вэб хуудасны дизайн хийхэд зориулагдаагүй. Энэ нь зүгээр л маш эвгүй юм. Жишээлбэл, bgcolor шинж чанар байдаг бөгөөд та арын өнгийг тохируулах боломжтой боловч энэ нь маш тохиромжгүй юм.

Үүний дагуу бид Cascading Style Sheets (CSS) ашиглах болно. Арын дэвсгэр тавих илүү олон боломжууд бий. Өнөөдөр бид хамгийн энгийн зүйлсийг авч үзэх болно.

Css ашиглан арын дэвсгэрийг хэрхэн тохируулах вэ?

Тиймээс, юуны өмнө та ямар элементийн дэвсгэрийг тохируулахаа шийдэх хэрэгтэй. Өөрөөр хэлбэл, бид дүрэм бичих сонгогчийг олох хэрэгтэй. Жишээлбэл, хэрэв та бүхэл бүтэн хуудасны арын дэвсгэрийг тохируулах шаардлагатай бол үүнийг үндсэн сонгогчоор, бүх блокуудын хувьд div сонгогчоор дамжуулан хийж болно. За, гэх мэт. Арын дэвсгэр нь бусад сонгогчидтой холбоотой байж болно: загварын анги, танигч гэх мэт.

Сонгогчийг сонгосны дараа та үл хөдлөх хөрөнгийн нэрийг өөрөө бичих хэрэгтэй. Дэвсгэр өнгийг (жишээлбэл, градиент эсвэл зураг биш, цул өнгө) тохируулахын тулд background-color шинж чанарыг ашиглана уу. Үүний дараа та хоёр цэг тавьж, өнгийг өөрөө бичих хэрэгтэй. Үүнийг янз бүрийн аргаар хийж болно. Жишээлбэл, түлхүүр үгс, hex код, rgb, rgba, hsl форматуудыг ашиглах. Ямар ч арга хийх болно.

Хамгийн түгээмэл хэрэглэгддэг арга бол арван зургаатын код юм. Өнгө сонгохын тулд өнгөний кодыг харуулах програмыг ашиглаж болно. Жишээлбэл, фотошоп, будаг эсвэл онлайн хэрэгсэл. Үүний дагуу жишээ болгон би бүх вэб хуудасны ерөнхий дэвсгэрийг бичих болно.

их бие( дэвсгэр өнгө: #D4E6B3; )

Энэ кодыг толгойн хэсэгт оруулах шаардлагатай. Файлууд нэг хавтсанд байх нь чухал.

Зургийг дэвсгэр болгон

Зургийн хувьд би жижиг html хэлний дүрсийг ашиглах болно:

Тодорхойлогчтой хоосон блок үүсгэцгээе:

< div id = "bg" > < / div >

Үүнд тодорхой хэмжээс, дэвсгэрийг өгье:

#bg(өргөн: 400px; өндөр: 250px; дэвсгэр зураг: url(html.png); )

#бг( өргөн: 400px; өндөр: 250px; дэвсгэр - зураг: url (html. png );

Энэ кодоос би шинэ шинж чанар - background-image ашигласан болохыг харж болно. Энэ нь html элементийн дэвсгэр болгон зураг оруулахад зориулагдсан. Юу болсныг харцгаая:

Зургийг зааж өгөхийн тулд та хоёр цэгийн ард url гэсэн түлхүүр үгийг бичиж, дараа нь хаалтанд файлын замыг зааж өгөх ёстой. Энэ тохиолдолд зураг нь html баримт бичигтэй нэг хавтсанд байгаа тул замыг зааж өгсөн болно. Та мөн зургийн форматыг зааж өгөх хэрэгтэй.

Хэрэв та үүнийг хийсэн бөгөөд арын дэвсгэр нь блок дээр харагдахгүй байгаа бол зургийн нэрийг зөв бичсэн эсэх, зам, өргөтгөл зөв тохируулагдсан эсэхийг дахин шалгана уу. Эдгээр нь хөтөч зургийг олж чадахгүй байгаа тул арын дэвсгэр харагдахгүй байх хамгийн түгээмэл шалтгаанууд юм.

Гэхдээ та нэг зүйлийг анзаарсан уу? Хөтөч нь блокийн туршид зургийг авч үржүүлсэн. Тиймээс, энэ бол дэвсгэр зургийн анхдагч үйлдэл бөгөөд тэдгээр нь блокт багтах боломжтой бол босоо болон хэвтээ байдлаар давтагдана. Энэ зан үйлийн тусламжтайгаар та амархан удирдаж чадна. Үүнийг хийхийн тулд 4 үндсэн утгыг агуулсан background-repeat шинж чанарыг ашиглана уу.

Давтах – анхдагч утга, зураг хоёр талдаа давтагдана;

Repeat-x – зөвхөн x тэнхлэг дээр давтагдана;

Repeat-y – зөвхөн y тэнхлэгийн дагуу давтагдана;

Давтахгүй - огт давтдаггүй;

Та утга бүрийг бичиж, юу болохыг харж болно. Би үүнийг ингэж бичнэ:

дэвсгэр-давталт: давтах-x;

дэвсгэр - давтах: давтах - x;

Одоо зөвхөн хэвтээ байдлаар давтана. Хэрэв та давтахгүй гэж тохируулсан бол зөвхөн нэг зураг байх болно.

Гайхалтай, бид энд дуусгаж болно, учир нь эдгээр нь дэвсгэртэй ажиллах үндсэн чадварууд боловч би танд илүү их хяналт тавих боломжийг олгодог өөр 2 шинж чанарыг харуулах болно.

Дахин давталтаар зохион бүтээгчид нэг жижигхэн зургийг ашиглан дэвсгэр бүтэц, градиент үүсгэх боломжтой байсан. Энэ нь 30-аас 10 пиксел эсвэл түүнээс бага хэмжээтэй байж болно. Эсвэл арай илүү. Зураг нь нэг эсвэл бүр хоёр талдаа давтагдахад ямар ч шилжилт харагдахгүй байсан тул үр дүн нь ганц, үл үзэгдэх дэвсгэр байв. Дашрамд хэлэхэд, хэрэв та вэбсайтдаа арын дэвсгэр болгон ашиглахыг хүсч байвал энэ аргыг ашиглах нь зүйтэй юм. Өнөөдөр градиентийг css3 аргыг ашиглан аль хэдийн хэрэгжүүлж болно, бид дараа нь энэ талаар ярих болно.

Суурь байрлал

Өгөгдмөл байдлаар, арын дэвсгэр зураг, хэрэв давтагдахаар тохируулаагүй бол блокныхоо зүүн дээд буланд байх болно. Гэхдээ байрлалыг background-position шинж чанарыг ашиглан хялбархан өөрчилж болно.

Та үүнийг янз бүрийн аргаар тохируулж болно. Нэг сонголт бол зүгээр л зураг байх ёстой талуудыг зааж өгөх явдал юм.

дэвсгэр байрлал: баруун дээд;

дэвсгэр - байрлал: баруун дээд;

Өөрөөр хэлбэл, босоо байдлаар бүх зүйл ижил хэвээр байна: дэвсгэр зураг нь дээд талд байрладаг, гэхдээ хэвтээ байдлаар бид хажуу талыг баруун тийш, өөрөөр хэлбэл баруун тийш өөрчилсөн. Байрлал тогтоох өөр нэг арга бол хувь юм. Энэ тохиолдолд тооллого нь ямар ч тохиолдолд зүүн дээд булангаас эхэлдэг. 100% - бүхэл бүтэн блок. Тиймээс, зургийг яг төвд байрлуулахын тулд бид дараах байдлаар бичнэ.

дэвсгэр байрлал: 50% 50%;

дэвсгэр байрлал: 50% 50%;

Байршлын талаар нэг чухал зүйлийг санаарай - эхний параметр нь үргэлж хэвтээ байрлал, хоёр дахь нь босоо байрлал юм. Тиймээс, хэрэв та 80% 20% утгыг харвал арын дэвсгэр зураг баруун тийш маш их шилжих болно, гэхдээ энэ нь тийм ч их буурахгүй гэж шууд дүгнэж болно.

Эцэст нь та байрлалыг пикселээр зааж өгч болно. Бүх зүйл адилхан, зөвхөн % оронд px байх болно. Зарим тохиолдолд ийм байрлал шаардлагатай байж болно.

Богино тэмдэглэгээ

Бүх зүйл бидний хийсэн байдлаар тохируулагдсан бол код нь нэлээд төвөгтэй болно гэдгийг хүлээн зөвшөөр. Энэ нь зураг руу хүрэх зам, давталт, байрлалыг зааж өгөх шаардлагатай болдог. Мэдээжийн хэрэг, давталт, байр суурь нь үргэлж шаардлагатай байдаггүй, гэхдээ ямар ч тохиолдолд үл хөдлөх хөрөнгийн товчлолыг ашиглах нь илүү зөв байх болно. Энэ нь дараах байдалтай харагдаж байна.

дэвсгэр: #333 url(bg.jpg) давтагдахгүй 50% 50%;

дэвсгэр: #333 url(bg.jpg) давтагдахгүй 50% 50%;

Өөрөөр хэлбэл, эхний алхам бол шаардлагатай бол ерөнхий дэвсгэрийн өнгийг тэмдэглэх явдал юм. Дараа нь зураг, давталт, байрлалд хүрэх зам. Хэрэв ямар нэг параметр шаардлагагүй бол зүгээр л орхи. Зөвшөөрч байна, энэ нь илүү хурдан бөгөөд илүү тохиромжтой бөгөөд бид кодоо мэдэгдэхүйц багасгадаг. Ерөнхийдөө би танд зөвхөн өнгө, зургийг зааж өгөх шаардлагатай байсан ч үргэлж товчилсон хэлбэрээр бичихийг зөвлөж байна.

Арын дэвсгэр зургийн хэмжээг хянах

Бидний одоогийн дүр төрх дараагийн мэхийг харуулахад тийм ч сайн биш байгаа тул би өөр нэгийг авах болно. Энэ нь блокийн хэмжээтэй эсвэл түүнээс дээш хэмжээтэй байг. Тиймээс, та блокоо бүрэн дүүргэхгүйн тулд дэвсгэр зураг хийх даалгавартай тулгарч байна гэж төсөөлөөд үз дээ. Мөн зураг, жишээлбэл, блокны хэмжээнээс ч том байна.

Энэ тохиолдолд та юу хийж чадах вэ? Мэдээжийн хэрэг, хамгийн энгийн бөгөөд боломжийн сонголт бол зургийг зүгээр л багасгах явдал юм, гэхдээ үүнийг хийх нь үргэлж боломжгүй байдаг. Энэ нь сервер дээр байгаа бөгөөд одоогоор үүнийг багасгах цаг хугацаа, боломж байхгүй гэж үзье. Асуудлыг харьцангуй шинэ гэж нэрлэж болох background-size шинж чанарыг ашиглан шийдэж болох бөгөөд энэ нь арын дэвсгэр зураг эсвэл ямар ч дэвсгэрийн хэмжээг өөрчлөх боломжийг олгодог.

Тиймээс миний зураг одоо блок доторх бүх зайг эзэлнэ, гэхдээ би түүнд дэвсгэр хэмжээг өгөх болно:

дэвсгэр хэмжээ: 80% 50%;

дэвсгэр хэмжээ: 80% 50%;

Дахин хэлэхэд, эхний параметр нь хэвтээ хэмжээг, хоёр дахь нь босоо хэмжээг тогтоодог. Бүх зүйл зөв хийгдсэнийг бид харж байна - гэрэл зураг нь блокны өргөний 80% өргөн, хагас өндөртэй болсон. Энд та зүгээр л нэг тодруулга хийх хэрэгтэй - хэмжээг хувь болгон тохируулснаар та зургийн харьцаанд нөлөөлж болно. Тиймээс хэрэв та пропорцийг алдагдуулахгүй байхыг хүсч байвал болгоомжтой байгаарай.

Таны таамаглаж байгаагаар дэвсгэрийн хэмжээг пикселээр зааж өгч болно. Мөн ашиглаж болох өөр хоёр түлхүүр үг байна:

Хавтас - зургийг дор хаяж нэг талдаа блокийг бүрэн дүүргэхийн тулд масштабтай болгоно.

Contain - зургийг хамгийн дээд хэмжээгээр нь блокт бүрэн оруулахын тулд масштаблана.

Эдгээр утгуудын давуу тал нь зургийн пропорцийг өөрчлөхгүй, ижил хэвээр үлдээх явдал юм.

Зургийг сунгах нь түүний чанар муудахад хүргэдэг гэдгийг та бас ойлгох хэрэгтэй. Би загвар зохион бүтээгчдийн амьдрал, бодит туршлагаас жишээ авч болно. Ширээний компьютерт зориулж дизайн хийхдээ сайтыг үндсэн дэлгэцийн өргөнтэй тохируулах хэрэгтэй гэдгийг хүн бүр мэддэг бөгөөд ойлгодог: 1280, 1366, 1920. Хэрэв та 1280-аас 200-ийн хэмжээтэй дэвсгэр зураг авбал үүнийг бүү өг. a background-size, дараа нь илүү том өргөнтэй дэлгэцүүд Хоосон зай гарч ирэх бөгөөд зураг нь өргөнийг бүрэн дүүргэхгүй.

Тохиолдлын 99% -д энэ нь вэб хөгжүүлэгчид тохирохгүй тул зураг нь цонхны хамгийн их өргөн хүртэл үргэлжилдэг тул дэвсгэрийн хэмжээ: бүрхэвчийг тохируулдаг. Энэ техникийг ашиглахад тохиромжтой, гэхдээ одоо та 1920 пикселийн дэлгэцийн өргөнтэй хэрэглэгчид зургийн чанараас доогуур байх магадлалтай гэсэн асуудалтай тулгарах болно.

Энэ нь хамгийн их өргөн хүртэл сунах болно гэдгийг танд сануулъя. Үүний дагуу чанар нь автоматаар муудах болно. Энд цорын ганц зөв шийдэл бол эхлээд 1920 пикселийн өргөнтэй илүү том зургийг ашиглах явдал юм. Дараа нь хамгийн өргөн дэлгэц дээр энэ нь байгалийн хэмжээтэй байх бөгөөд бусад дээр энэ нь аажмаар таслагдах болно, гэхдээ арын дэвсгэр зургийг зөв сонгосон бол энэ нь сайтын харагдах байдалд нөлөөлөхгүй.

Ерөнхийдөө энэ бол энэ нийтлэлээс олж авсан мэдлэгээ бодит зураг төсөл боловсруулахдаа хэрхэн ашиглах тухай 1 жишээ юм.

css ашиглан тунгалаг дэвсгэр

Css ашиглан хэрэгжүүлж болох өөр нэг онцлог бол тунгалаг дэвсгэр юм. Өөрөөр хэлбэл, энэ дэвсгэрээр дамжуулан түүний ард юу байгааг харах боломжтой болно.

Жишээ болгон би бүх хуудсыг жишээнүүдэд өмнө нь ашигласан зургийн арын дэвсгэр болгон тохируулах болно. Бид бүх туршилтаа хийдэг bg танигчтай блокийн хувьд rgba өнгөний тохиргооны форматыг ашиглан дэвсгэрийг тохируулах болно.

Өмнө нь хэлсэнчлэн CSS дээр өнгө тохируулах олон формат байдаг. Тэдгээрийн нэг нь график редактор дээр ажилладаг хүмүүсийн хувьд нэлээд алдартай формат болох rgb юм. Энэ нь дараах байдлаар бичигдсэн: rgb(17, 255, 34);

Хаалтанд байгаа эхний утга нь улаан, дараа нь ногоон, дараа нь цэнхэр өнгөний ханалт юм. Утга нь 0-ээс 255 хүртэл тоон байж болно. Үүний дагуу rgba формат нь өөр биш, зөвхөн нэг параметрийг нэмсэн - альфа суваг. Утга нь 0-ээс 1 хүртэл байж болох бөгөөд 0 нь бүрэн ил тод байдал юм.

Html дээр сайтын арын дэвсгэрийг заагаагүй бөгөөд энэ нь CSS хэв маягийг ашиглан бичигдсэн байдаг, гэхдээ энэ нь зөвхөн онолын албан ёсны зүйл юм. Одоо энэ дэвсгэрийг хэрхэн тодорхойлохыг олж мэдье.

Вэбсайт эсвэл тусдаа блокийн арын дэвсгэр

Энэ зорилгодоо хүрэхийн тулд бидэнд css файл хэрэгтэй тул үүнийг үүсгэж, html-тэй холбох хэрэгтэй. Энэ тухай энэ нийтлэлд бичсэн болно. Үүний дараа та ажиллаж эхлэх боломжтой. Эхлээд та арын дэвсгэрийг юу болгохоо шийдэх хэрэгтэй. Хэрэв хуудсыг бүхэлд нь харуулсан бол та үүнийг дараах байдлаар хийж болно.

их бие(
Арын өнгө: цагаан;
}

Өөрөөр хэлбэл, бид бүх хуудсыг төлөөлдөг биеийн шошгонд ханддаг. Арын өнгийг тохируулахын тулд background-color шинж чанарыг ашиглана уу. Харин арын дэвсгэрийг цул өнгөөр ​​бус хэв маягаар тохируулах шаардлагатай бол яах вэ? Дараа нь та дараах байдлаар бичих хэрэгтэй.

их бие(
Арын дэвсгэр зураг: url(зураг.зураг өргөтгөл рүү очих зам)
}

Тодорхой болгохын тулд би жишээг ашиглан бүх зүйлийг илүү нарийвчлан авч үзэхийг санал болгож байна. Үүний тулд би энэ зургийг ашиглах болно:

Жишээ нь, background-image: url(comp.png) . Энэ жишээнд бид css файлтай нэг хавтсанд байрлах png форматаар comp (би ингэж нэрлэсэн) дэвсгэр зургийг тавьсан.
Html дээр би CSS шинж чанаруудын ажиллагааг харуулахын тулд тодорхой хэмжээс бүхий тусгай блок үүсгэх болно.

Мөн үүнд зориулсан загварууд энд байна:

#ct(
Арын дэвсгэр зураг: url(comp.png);
өргөн: 600px;
өндөр: 400px;
}

Эндээс бидэнд юу байна:

Яагаад тэр вэ? Баримт нь анхдагчаар хөтөч блокыг бүрэн дүүргэхийн тулд зургийг олон удаа давтдаг. Заримдаа энэ нь жишээлбэл, үл үзэгдэх хэв маягийг ашиглах үед зайлшгүй шаардлагатай байдаг, гэхдээ бидний тохиолдолд нэг зураг байх ёстой. Аз болоход үүнийг маш амархан зохицуулж болно.

Арын дэвсгэрийг давтах

Хэрэв танд дэвсгэр зураг байгаа бол анхдагчаар энэ нь хэвтээ ба босоо байдлаар давтагдах бөгөөд хуудасны бүх орон зайг дүүргэх болно. Үүнийг арилгахын тулд background-repeat шинж чанар болон түүний давтагдахгүй утгыг ашиглана уу. Мөн дараахь утгууд байдаг.

• Repeat-x – зөвхөн хэвтээ байдлаар давтана
• Repeat-y – зөвхөн босоо

График дэвсгэрийнхээ шинж чанарууд дээр нэмье:

Суурь-давталт: давтагдахгүй;

Байрлал

background-position шинж чанар нь зургийг байрлуулах байршлыг тодорхойлдог. Энд хоёр утгыг зааж өгсөн болно - хэвтээ ба босоо. Жишээ нь: background-position: баруун доод – баруун доод буланд байрлах байрлал, зүүн дээд талд – доод дээд буланд (мөн өгөгдмөл байдлаар), 250px 500px – зүүн дээд булангаас баруун тийш 250 пиксел ба доош 500.

Жишээнүүдийг илүү сайн харцгаая:

Суурь байрлал: баруун дээд;

Зураг нь баруун дээд ирмэг рүү шилжих болно. Мөн ирмэгийг нь харахын тулд би блокон дээр шар дэвсгэр өгсөн.

дэвсгэр байрлал: 50% 50%;

Зураг нь блокондоо яг төвлөрч харагдсан. Тийм ээ, тийм ээ, энэ нь албан тушаалын хувийн бичлэгийн ачаар боломжтой юм.

суурь байрлал: 70% 20%;

Арын дэвсгэр нь хэвтээ чиглэлд 70%, босоо чиглэлд 20% шилждэг.

Мөн сөрөг байрлалын утгыг пикселээр зааж өгөхийг зөвшөөрнө. Жишээлбэл, та том спрайт зураг ашиглаж байгаа үед үүнийг хийж болно, та энэ спрайтыг шаардлагатай хэсгийг блок болгон оруулах хэрэгтэй.

Арын дэвсгэрийг түгжих

Би бас background-attachment хэмээх нэг өмчид үнэхээр дуртай. Энэ нь зөвхөн хоёр утгатай бөгөөд эхнийх нь анхдагч (гүйлгэх) юм. Энэ нь хуудсыг гүйлгэх үед дэвсгэр нь мөн гүйлгэх бөгөөд хэрэв та зургийг давталгүйгээр ашиглавал энэ нь эцэстээ дуусч, зүгээр л өнгө болно гэсэн үг юм.

Үүнээс урьдчилан сэргийлэхийн тулд background-attatchment: fixed-г зааж өгсөн бөгөөд одоо манай дэвсгэрийг найдвартайгаар нь бэхэлсэн. Үүнийг гүйлгэх үед хуудаснаас алга болохгүйн тулд блокийн тогтмол байрлалыг хэрхэн тодорхойлохтой харьцуулж болно.

Энэ бүх сайн сайхны товчилсон хувилбар

Бид танд арын дэвсгэр үүсгэх боломжийг олгодог олон шинж чанаруудын талаар ярилцсан боловч хэрэв та бүгдийг нь ашиглавал танд төвөгтэй бичлэг гарах болно. Маш гоёмсог шийдэл байна. Арын дэвсгэр шинж чанар нь танд дараах дарааллаар зайгаар тусгаарлагдсан шаардлагатай тохиргоог бичих боломжийг олгоно.
Суурь: өнгөт зураг давтах зүү байрлал;
Одоо бүх зүйлийг ингэж бичиж болно:

Суурь: шар url(comp.png) давтагдахгүй 20% 100px;

Хэрэв зарим өмчийг тодорхойлох шаардлагагүй бол үүнийг зүгээр л орхигдуулсан (бидний тохиолдолд бид арын хавсралт бичээгүй).

Маш олон дэвсгэр

Хэрэв танд хэд хэдэн дэвсгэр зураг хэрэгтэй бол яах вэ? Энэ нь тохиолддог, та юу хийж чадах вэ? Өнөөдөр CSS энэ функцийг дэмждэг. За бас оролдоод үзье. Энэ дүрсийг авцгаая

Би үүнийг зөөврийн компьютер гэж нэрлэсэн.

Мөн энд олон утас оруулах код байна:

Суурь: url(comp.png) давтагдахгүй 20% 100px,
url(laptop.png) давтагдахгүй 50% 50%;
дэвсгэр өнгө: шар;

Таны харж байгаагаар та эхний зургийн ард таслал тавьж, хоёр дахь зургийн тохиргоог оруулах хэрэгтэй. Энэ тохиолдолд цул өнгийг тусад нь тавих нь дээр.

Үүнтэй адилаар та хүссэн хэмжээгээрээ олон зураг бичиж болно, гэхдээ үүнийг бүү хэтрүүлээрэй - хэт олон график нь тийм ч сайн биш юм.

Энд би энэ нийтлэлийг дуусгахыг хүсч байна. Та бусад олон сонирхолтой зүйлийг арын дэвсгэр дээр хийж болно, би ирээдүйд тэдний талаар бичихийг хичээх болно (мөн би аль хэдийн ямар нэгэн зүйл бичсэн - жишээ нь). Энэ үл хөдлөх хөрөнгийн хайгуулд амжилт хүсье.