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

Хуудасны дэвсгэр зураг - HTML

Юуны өмнө тодорхойлох аргыг авч үзье Арын зурагшинж чанарыг ашиглан сайт дээр дэвсгэршошго бие:

Энд арын дэвсгэр зургийг body tag-ийн арын шинж чанарыг ашиглан тохируулна.

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

Жич:Дэвсгэр зураг болон дэвсгэр өнгийг HTML ашиглан бус харин ашиглахыг зөвлөж байна CSS ашиглан. Энэ тохиолдолд код нь хүчинтэй бөгөөд илүү зөв байх болно.

Хуудасны дэвсгэр зураг - CSS

IN CSS дэвсгэрШинэ өнгө, дэвсгэр зургийг нэг шинж чанарт тохируулж болно дэвсгэр:

Энд дэвсгэр зургийг арын CSS шинж чанарыг ашиглан тохируулсан.

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

Хэрэв та арын дэвсгэр зургийг хөтчийн цонхны бүрэн хэмжээгээр сунгахыг хүсвэл өмчийг ашиглана уу дэвсгэр хэмжээ: 100%;

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

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

ЖИШЭЭ
Эх сурвалжийг ТАТАЖ АВАХ

Хариулттай дэвсгэр зургийг ашиглах жишээ

Өнөөдөр дэвсгэр зураг нь хуудасны бүх хэсгийг хамарсан сайтууд маш их алдартай.
Эдгээр вэбсайтуудын заримыг доор харуулав.

Дарвуулт завины нэгдэл

Дижитал телепати

Марианна ресторан

Хэрэв та төсөлдөө ижил төстэй "харагдах" байхыг хүсч байвал та зөв зам дээр байна.

Үндсэн ойлголтууд

Энд бидний тоглоомын төлөвлөгөө байна.

Үзэгдэх хэсгийг бүхэлд нь хамрахын тулд background-size шинж чанарыг ашиглана уу

CSS background-size шинж чанарыг хамгаалахаар тохируулж болно. Хавтасны утга нь хөтчөөс дэвсгэр зургийг автоматаар болон пропорциональ байдлаар урт, өргөнөөр нь масштаблахыг зааварчилдаг бөгөөд ингэснээр энэ нь харах цонхны өргөн/өндөртэй тэнцүү эсвэл түүнээс их хэвээр байна.

Хөдөлгөөнт төхөөрөмжид зориулсан дэвсгэр зургийн жижиг хувилбарыг авахын тулд медиа асуулга ашиглах

Жижиг дэлгэцийн нягтралтай хуудас ачаалах хугацааг багасгахын тулд бид дэвсгэр зургийн жижиг хувилбарыг авахын тулд медиа асуулга ашиглана. Гэхдээ энэ нь шаардлагагүй бөгөөд үүнийг орхигдуулж болно. Энэ технологитүүнгүйгээр маш сайн ажилладаг.

Гэсэн хэдий ч гар утасны төхөөрөмжүүдэд дэвсгэрийн жижиг хувилбаруудыг ашиглах нь тийм ч муу санаа биш бөгөөд яагаад гэдгийг би тайлбарлах болно.
Жишээнд ашиглах зураг нь ойролцоогоор 5500х3600px хэмжээтэй байна.

Энэхүү нягтралын тусламжтайгаар бид одоогоор үйлдвэрлэж буй ихэнх өргөн форматтай мониторууд дээр үзэх талбайг бүхэлд нь хамрах давуу талтай боловч сул тал нь зургийн хэмжээ юм. Энэ нь ойролцоогоор 1.7 MB юм.

Зөвхөн дэвсгэр зургийг ачаалахын тулд ийм их зай үлдээх нь ямар ч тохиолдолд сайн санаа биш бөгөөд хөдөлгөөнт төхөөрөмжийн хувьд энэ нь маш муу санаа юм. Нэмж дурдахад ийм нягтрал нь бага нягтралтай дэлгэц дээр шаардлагагүй юм ( Би энэ талаар дараа дэлгэрэнгүй ярина).

Тэгэхээр. Эхэлцгээе.

HTML

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

...Таны хуудасны агуулга...

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

Гэсэн хэдий ч, энэ техник нь ямар ч блок элемент дээр ажиллах болно (div эсвэл form гэх мэт). Хэрэв таны блок савны өргөн-өндөр хөдлөх боломжтой бол арын дэвсгэр зураг нь мөн савны талбайг бүхэлд нь дүүргэхийн тулд хэмжээг өөрчлөх болно.

CSS

Бид биеийн элементийн шинж чанарыг дараах байдлаар зарладаг.

их бие ( /* Дэвсгэр зургийн байршил */ background-image: url(images/background-photo.jpg); /* Дэвсгэр зургийг хэвтээ ба босоо байдлаар голлосон */ дэвсгэрийн байрлал: төвийн төв; /* Дэвсгэр зураг давтагдахгүй */ background-repeat: no-repeat; /* арын дэвсгэр нь харагдах талбарт бэхлэгдсэн тул агуулгын өндөр нь зургийн өндрөөс хэтэрсэн үед хөдлөхгүй */ background-attachment: fixed; /* Энэ шинж чанар нь агуулсан савны хэмжээ өөрчлөгдөхөд масштабыг өөрчлөх дэвсгэр */ background-size: cover; /* дэвсгэр зургийг ачаалах үед харагдах дэвсгэр өнгө */ background-color: #464646; )

Энэ жагсаалтын хамгийн чухал үнэ цэнэтэй өмч нь:

дэвсгэр хэмжээ: бүрхэвч;

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

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

Таны мэдэж байгаагаар бид зургийг бодит хэмжээнээс нь хэтрүүлэхэд зургийн чанараа алддаг ( өөрөөр хэлбэл пикселжилт гарч ирнэ):

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

Арын дэвсгэрийг сонгохдоо үүнийг бүү мартаарай. Демо жишээн дээр бид 5500х3600px хэмжээтэй зургийг ашигладаг том дэлгэцүүд, тиймээс энэ тохиолдолд үүнтэй төстэй зүйл тохиолдох магадлал багатай.

Арын дэвсгэр нь төвд нийцэж байгаа эсэхийг баталгаажуулахын тулд бид дараах зүйлийг зарлав.

дэвсгэр байрлал: төвийн төв;

Энэ нь масштабын тэнхлэгүүдийг харах цонхны төв рүү тохируулна.

Энд бид юу хийх вэ. Хуудсыг доош гүйлгэсэн ч зураг хэвээр үлдэхийн тулд background-attachment шинж чанарыг засахаар тохируулцгаая.

арын хавсралт: тогтмол;

Демо жишээнд би " гэсэн сонголтыг оруулсан. зарим контентыг татаж авах" Ингэснээр та хуудсыг гүйлгэх үед арын дэвсгэрийн байдлыг ажиглах боломжтой.

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

Дараах үл хөдлөх хөрөнгийн үнэ цэнэ нь өөрөө ойлгомжтой юм.

CSS товчлол

Дээр тайлбарлахын тулд би CSS шинж чанаруудыг бүрэн эхээр нь тодорхойлсон.

Богино хувилбар нь иймэрхүү харагдаж байна:

их бие (арын дэвсгэр: url(background-photo.jpg) төвийн төвийн тагийг давтахгүй зассан; )

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

Нэмэлт: дэвсгэр зургийн жижиг хувилбарыг авахын тулд медиа асуулга

Бага нарийвчлалтай дэлгэцийн хувьд бид зургийн нягтралыг 768-аас 505px болгон багасгахын тулд Photoshop хэрэгтэй болно. Би бас файлын хэмжээг багасгахын тулд Smush.it-ээр дамжуулан ажиллуулсан. Энэ нь хэмжээг 1741-ээс 114 килобайт хүртэл бууруулах боломжийг олгосон. Энэ нь файлын хэмжээг 93%-иар багасгасан.

Битгий буруугаар ойлгоорой, гэхдээ 114 килобайт нь зарим төрлийн вэб дизайн хийхэд маш их хэрэглэгдэж байна. Шаардлагатай бол бид зөвхөн эдгээр 114 килобайтыг ачаалах болно, учир нь статистикийг харвал ширээний болон гар утасны дизайны хооронд тохиролцоо хийх ёстой.

Мөн энд медиа асуулга өөрөө байна:

Медиа асуулгын гол хэсэг нь max-width: 767px шинж чанар бөгөөд энэ нь манай тохиолдолд хөтчийн харах хэсэг 767px-ээс том бол том дүрсийг ашигладаг гэсэн үг юм.

Энэ аргын сул тал нь хэрэв та хөтчийн цонхны хэмжээг 1200px-ээс 640px (эсвэл эсрэгээр) болгон өөрчлөх юм бол жижиг юмуу том зураг ачаалагдах үед анивчих дэлгэцийг харах болно.

Мөн үүнээс гадна, улмаас зарим нь хөдөлгөөнт төхөөрөмжүүдилүү өндөр нарийвчлалтай ажиллах боломжтой - жишээлбэл, 1136x640px нягтралтай Retina дэлгэцтэй iPhone 5, жижиг зураг нь муухай харагдах болно.

Бараг бүх алдартай сайтууд сайхан байдаг Гадаад төрх. Вэбсайт дизайны чухал хэсэг бол бидний хүн нэг бүр үүсгэж эсвэл өөрчлөх боломжтой дэвсгэр гэж нэрлэгддэг дэвсгэр юм. Энэ нийтлэлд би вэбсайт дээр арын дэвсгэрийг хэрхэн яаж байрлуулахыг танд хэлэх болно.

Вэбсайтуудын шинэ дэвсгэр хийх

Даалгаврыг гүйцэтгэхийн тулд та 4 аргын аль нэгийг ашиглаж болно.

• 1. Нэг өнгийн дэвсгэр
• 2. Бүтэцтэй дэвсгэр
• 3. Градиент ашиглан дэвсгэр
• 4. Том зургийн дэвсгэр

Нэг өнгө ашиглан дэвсгэр үүсгэх

Нэг өнгөнөөс бүрдэх сайтын арын дэвсгэрийг үүсгэх эсвэл өөрчлөхийн тулд та файл руу очих хэрэгтэй style.css, үүнд утгыг олох - бие (энэ нь сайтын үндсэн хэсгийг хариуцдаг). Одоо та дэвсгэр өнгө функцийг бүртгүүлж, өнгөний кодыг зааж өгөх хэрэгтэй. Хэрэв та вэбсайтын цагаан дэвсгэр үүсгэх шаардлагатай бол дараах кодыг бичих шаардлагатай болно.

дэвсгэр өнгө: # 83C5E9; (жишээ дээрх шиг цэнхэр дэвсгэр)

Та вэбсайтаас өнгөний бүрэн жагсаалтыг олж болно - (STM). Өнгийг өөрчлөхийн тулд бүдүүн гэдэсний дараах утгыг өөрчилж, хүчин чармайлтаа сайхан өнгөрүүлээрэй.

Текстур ашиглан дэвсгэр үүсгэх

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

дэвсгэр өнгө: #537759;

дэвсгэр зураг: url (зураг/загвар.png);

Энэ код нь өнгө хадгалах танил параметр (энэ нь ногоон өнгөтэй) болон ногоон бүтэцтэй холбох үүрэгтэй элементийг агуулдаг.

Градиент ашиглан дэвсгэр зураг хийх

CSS функцийг ашиглан холбогдсон аливаа зургийг хэвтээ болон босоо байдлаар (тэнхлэгийн дагуу) давтаж болно. XТэгээд Ю). Энэ боломж нь сайтын ямар ч энгийн дэвсгэрийг өөрийн гараар бүтээх боломжийг бидэнд олгодог. Үүнийг хийхийн тулд та 1 мегапикселийн өргөнтэй градиент үүсгэх хэрэгтэй (доорх зургийг харна уу), үүнийг зураг болгон хадгалж, байршуулахдаа байршуулах хэрэгтэй. Үүний дараа та шаардлагатай кодыг бичиж болно, тухайлбал:

дэвсгэр өнгө: #83C5E9;

дэвсгэр зураг: url (зураг/gradient.jpg);

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

Энэ багцад тэргүүлэх зэргийн дарааллаар бид давхар даатгалд ашигладаг дэвсгэрийн өнгийг хариуцдаг функц байдаг. Үүний дараа градиентийг холбох үүрэгтэй параметр ба эцэст нь X тэнхлэгийн дагуу градиентийг давтах үүрэгтэй функц.

Вэбсайтын дэвсгэр дээр том зураг ашиглах

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

дэвсгэр өнгө: #000000;

дэвсгэр зураг: url(зураг/зургийн гарчиг.jpg);

дэвсгэр байрлал: төв дээд;

дэвсгэр давталт: давтагдахгүй;

Хэрэв эхний хоёр параметрийн хувьд бүх зүйл тодорхой бол сүүлийн хоёр параметрийг хамрах шаардлагатай. Гурав дахь функц нь сайтын төвд байгаа зургийг засах боломжийг олгодог бөгөөд сүүлийн параметр нь хуудасны бүтцэд түүний давталтыг блоклодог.

ucoz вэбсайтуудын дэвсгэрийг өөрчлөх

Сайтын дэвсгэр үүсгэх эдгээр аргуудыг өөр өөр агуулгын удирдлагын системд ашиглаж болох боловч сайт дээр ашиглах боломжгүй - ucoz. ucoz вэбсайтын арын дэвсгэрийг өөрчлөхийн тулд та сайтын хяналтын самбар руу очих хэрэгтэй "Дизайн менежмент", дараа нь "Загваруудыг засах".

Одоо та загварын хуудас (CSS) нээж, мөрийг олох хэрэгтэй "бие"ба параметр "арын дэвсгэр". Үүний дараа та холбоосыг хуулж, интернет хөтөч дээрээ буулгаж, арын дэвсгэр дээрх зургийг үзэх боломжтой болно.

Шинэ дэвсгэр ашиглахын тулд та үүнийг байршуулахад л хангалттай Файл менежер. Үүний зэрэгцээ, шинэ дэвсгэр зургийн нэр нь өөрчлөлтийн өмнөхтэй ижил байгаа эсэхийг шалгаарай. Ажлаа хадгалаад вэб сайт руу орж хийсэн ажлаа харна уу.

Сайтын дэвсгэрийг HTML болгож өөрчлөх

Хэрэв та html сайт дээр зураг ашиглан арын дэвсгэр хийхийг хүсвэл кодонд мөрийг оруулна уу.

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

Энэ нь бидний түүхийг дуусгаж байна. Одоо та вэбсайтын дэвсгэр зургийг хэрхэн хийхээ мэддэг болсон. Аз жаргалтай төслүүд!

Хэрэв шал нь үнэтэй Перс хивсээр бүрсэн бол ямар ч өрөө илүү сайхан харагдах болно. Тэгэхээр танай вэбсайт яагаад муу байна вэ? Магадгүй үнэтэй, гоёмсог гараар хийсэн хивсээр шалыг нь "бүрэх" цаг болсон байх. Вэб сайтын дэвсгэр зургийг хэрхэн яаж хийхийг нарийвчлан авч үзье.

Сайтын арын дэвсгэр

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

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

Вэбсайт дээрх дэвсгэрийг өөрчлөх хэд хэдэн арга байдаг. Үүний тулд CSS эсвэл html-ийн чадварыг ашигладаг. Гэхдээ дэвсгэртэй ажиллах олон шинж чанарууд нь эдгээр вэб технологид ижил нэртэй, хэрэглэх аргатай байдаг.

html дээр дэвсгэртэй ажиллах үндсэн ойлголтууд

Хэд хэдэн элементийг дэвсгэр болгон ашиглаж болно:

• Өнгө;
• Арын зураг;
• Бүтцийн зураг.

Тэдгээрийн хэрэглээг илүү нарийвчлан авч үзье.

Сайтын дэвсгэр өнгийг тохируулахын тулд загварын шинж чанарын background-color шинж чанарыг ашиглана уу. Өөрөөр хэлбэл, вэб хуудасны үндсэн өнгийг тохируулахын тулд та шошгон дотор бичих хэрэгтэй . Жишээлбэл:

Вэб сайтын дэвсгэр №55D52B

Арван арван тоот өнгөний кодоос гадна түлхүүр үг эсвэл RGB форматын утгыг дэмждэг. Жишээ нь:

Вэб сайтын дэвсгэр rgb(23,113,44)

Вэб сайтын дэвсгэр ногоон

ашиглан дэвсгэрийн өнгийг тохируулна уу түлхүүр үгсбусад хоёр аргатай харьцуулахад хэд хэдэн хязгаарлалттай байдаг.

HTML нь өнгө тохируулахын тулд зөвхөн 16 түлхүүр үгийг дэмждэг. Тэдгээрийн заримыг энд дурдъя: цагаан, улаан, цэнхэр, хар, шармөн бусад.

Тиймээс, html сайтын арын дэвсгэрийг тохируулахын тулд арван зургаатын тоо эсвэл RGB форматыг ашиглах нь дээр.

Өнгөний сонголтоос гадна өөр өөр тохируулга хийх боломжтой. Хэрэв background-color шинж чанарыг ил тод гэж тохируулсан бол хуудасны дэвсгэр нь ил тод болно. Энэ утгыг анхдагчаар энэ өмчид оноодог.

Одоо сайтын дэвсгэр зургийг тохируулах гипертекст хэлний чадварыг харцгаая. Үүнийг background-image шинж чанарыг ашиглан хийж болно.

Кодоос харахад зураг нь хаалтанд заасан url замаар холбогдсон байна. Гэхдээ бүх зураг тийм ч том биш бөгөөд хэмжээ нь дэлгэцийн бүх хэсгийг дүүргэх болно. Жижиг зургийг хэрхэн харуулахыг харцгаая.

Бид яруу найргийн тухай вэбсайтыг хөгжүүлж байна гэж бодъё, бид Pegasus-ийн зургийг арын дэвсгэр болгон ашиглах хэрэгтэй байна. Далавчтай морь нь яруу найрагчийн бүтээлч сэтгэлгээний эрх чөлөөг илэрхийлэх болно!

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

Дөрвөн далавчтай инээж буй морь яруу найрагчдад хэтэрхий их урам зориг өгөх байх. Тиймээс бид Pegasus-аа хувилахыг хориглодог. Бид үүнийг background-repete шинж чанарыг ашиглан хийдэг. Боломжит утгууд:

• давталт-x – дэвсгэр зургийг хэвтээ байдлаар давтах;
• давтах-y - босоо;
• давтах - хоёр тэнхлэг дээр;
• давтагдахгүй - давтахыг хориглоно.

Жагсаалтад орсон сонголтуудын дотроос бид сүүлчийнх нь сонирхолтой юм. Сайтын арын дэвсгэрийг өөрчлөхийн өмнө бид үүнийг коддоо ашигладаг.

Гэхдээ мэдээжийн хэрэг, манай сурталчилгааны хуудсыг дэлгэцийн дунд байрлуулсан бол илүү дээр байх болно. Background-position шинж чанар нь хуудсан дээрх дэвсгэр зургийг байрлуулахад зориулагдсан. Та байршлын координатыг хэд хэдэн аргаар тохируулж болно:

• Түлхүүр үг ( дээд, доод, төв, зүүн, баруун);
• Хувь – тоолох нь зүүн дээд булангаас эхэлнэ;
• Хэмжилтийн нэгжээр (пиксел).

Хамгийн энгийн төвлөрсөн сонголтыг ашиглая:

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

• гүйлгэх;


• тогтмол.

Бидэнд сүүлчийн үнэ цэнэ хэрэгтэй. Одоо бидний жишээ код дараах байдлаар харагдах болно.

Вэб сайтын бүтэцтэй дэвсгэр

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

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

Эдгээр бүх асуудлыг бүтэцтэй дэвсгэрийн тусламжтайгаар шийддэг. Энэ нь жижиг зургийг бүтэцтэй загвар болгон ашигладаг. Олон удаа давтагдсан ч гэсэн зураг нэг л удаа ачаалагддаг.

Трепачев Д.П. 2012-2020 он

Оюутнуудад: Би 1-р сарын 6 хүртэл амралттай, амралтын үеэр би аль болох хариулна,
заримдаа би хэд хоног алга болдог

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX задлах үндсэн заавар HTML лавлагаа CSS лавлагаа OOP болон MVC заавар Видео хичээл Үндсэн заавар Лавлагаа видео хичээл Үндсэн заавар Үндсэн заавар Администраторын үндсэн заавар Хөгжүүлэгчийн заавар AJAX+PHP

background-attatchment шинж чанар

Өмч дэвсгэр хавсралтхэрхэн гүйлгэхийг зааж өгнө дэвсгэр зурагэлемент: текст эсвэл текстийн хамт зураг дээр гулсуулна.

Синтакс

Сонгогч (арын хавсралт: тогтмол | гүйлгэх | орон нутгийн; )

Үнэ цэнэ

Өгөгдмөл утга: гүйлгэх.

Жишээ. Гүйлгэх утга

Одоо өмч дэвсгэр хавсралттохируулагдсан гүйлгэх. Элементийг босоо байдлаар гүйлгэвэл та текстийг дэвсгэрийн хамт гүйлгэхийг харах болно:

их бие (фонт-хавсралт: гүйлгэх; background-image: url("bg.png"); ) #elem (өргөн: 400px; захын зай: 0 auto; текстийг зэрэгцүүлэх: зөвтгөх; үсгийн жин: тод; үсгийн хэмжээ: 20px;)

Жишээ. Гүйлгэх утга

Тэгээд одоо өмч дэвсгэр хавсралттохируулагдсан тогтмол. Элементийг босоо байдлаар гүйлгэвэл та текстийг арын дэвсгэр дээр гулсуулж байгааг харах болно:

их бие (фонт-хавсралт: тогтмол; дэвсгэр-зураг: url("bg.png"); ) #elem (өргөн: 400px; зах: 0 автомат; текстийг зэрэгцүүлэх: зөвтгөх; үсгийн жин: тод; үсгийн хэмжээ: 20px;)