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

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

Word 2007, 2010, 2013, 2016 оны дэвсгэр дээр зургийг тохируулахын тулд та "Хуудасны зохион байгуулалт" таб руу орж, тэнд байгаа "Хуудасны өнгө" товчийг дараад "Дүүргэх аргууд" сонголтыг сонгох хэрэгтэй.

Хэрэв та Word 2003 ашиглаж байгаа бол үүнийг хийхийн тулд "Формат - Арын дэвсгэр - Бөглөх аргууд" цэсийг нээх хэрэгтэй.

Үүний дараа хуудасны дэвсгэр тохиргоо бүхий "Дүүргэх аргууд" цонх нээгдэнэ. Энэ цонхонд та "Зураг" таб руу очиж, тэнд байгаа "Зураг" товчийг дарж, гарч ирэх цонхноос баримт бичгийн арын дэвсгэрийг хийхийг хүсч буй зургаа сонгоно уу.

"Дүүргэх аргууд" цонхонд хүссэн зураг гарч ирсний дараа та "Ok" товчийг ашиглан үүнийг хаах хэрэгтэй.

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

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

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

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

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

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

Хуудасны арын дэвсгэрийг арилгахын тулд та "Хуудасны өнгө" товчийг дараад "Өнгөгүй" гэснийг сонгох хэрэгтэй.

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

HTML файлаа Notepad эсвэл дассан бусад текст засварлагч ашиглан нээнэ үү. Жишээлбэл, хамгийн бага текст бүхий энгийн вэбсайтын хуудсыг авъя. Та ямар ч хөтөч ашиглан файлаа нээж болно.

Интернет удаан холболттой хүмүүс сайтын дэвсгэр зургийг шууд харах боломжгүй тул эхлээд дэвсгэрийнхээ өнгийг өөрчил. Хэсэг хугацаанд зургийг ачаалж байх үед тэд зөвхөн таны сайтын өнгийг харах боломжтой болно.
Шошгонд оруулна уу параметр bgcolor=”*****”, энд ***** нь өнгөний код юм. Та HTML-ийн өнгийг аль ч хувилбараас олж мэдэх боломжтой график засварлагч"Вэбд зориулсан" сонголтыг сонгох эсвэл https://colorscheme.ru/color-names вэбсайтаас авна уу

Та зүгээр л тойрог палитраас өнгийг сонгоод дөрвөлжин доторх эрчмийг нь тохируулах хэрэгтэй. Баруун талд та html-д зориулсан хоёр кодыг харах болно. Тэдгээрийг хуулж тэмдэглэлийн дэвтэрт буулгана уу.

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

Одоо та дэвсгэр зургаа оруулж эхэлж болно. Илүү хялбар болгохын тулд хүссэн зургийг кодын хавтсанд байрлуул. Түүнд латин үсгээр нэр өг.

Одоо файлын байршлыг олж, хулганы баруун товчийг дараад "Нээх" гэснийг сонгоод компьютер дээрээ суулгасан дурын хөтөч дээр дарна уу.

хаягийг хуулж авна уу хайлтын мөртаны хөтөч.

Одоо шошгон дээр мөрийг оруулна уу:

• style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Файлаа хадгал.

Вэб хуудсаа шалгана уу. Таны текстийн дэвсгэр дэвсгэр солигдсоныг та харах болно.

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

• дэвсгэр давталт: "Утга." Таны утгын сонголтууд нь: "давталт-x" байж болно - арын дэвсгэр зургийг хэвтээ болон босоо байдлаар давтана. "давталт-y" - зөвхөн босоо байдлаар давт. "давталтгүй" - зураг байрандаа хөлдсөн бөгөөд давтагдахгүй. "Зай" - хуудсыг бүхэлд нь зургийн хамгийн их хуулбараар дүүргэх бөгөөд хамгийн гадна талыг нь тайрах болно. "дугуй" - ижил сонголт, гэхдээ зургийн ирмэгийг сайтар масштаблах болно;
• дэвсгэр хавсралт: "Утга." Хэрэв та "Утга" гэсэн үгийн оронд "scroll" гэсэн шошгыг орлвол зураг сайттай хамт гүйлгэх болно. "Тогтмол" - гүйлгэх үед дэвсгэр нь өөрчлөгдөөгүй хэвээр байна;
• background-size: Утга Утга2. Энд утгууд нь пикселийн утгыг авах ёстой. Жишээ нь: 100px 200px. Пикселээс гадна хувийн утгыг хүлээн авдаг. Энэ нь хуудсыг зургаар дүүргэх сонголт юм. Тооноос гадна та хоёр параметрийг оруулж болно: "агуул" - урт талын дагуух зургийг дүүргэх, "бүрхэх" - хуудсыг өргөний дагуу дүрсээр дүүргэнэ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цонхны өргөнийг бүхэлд нь арын дэвсгэрийг хэрхэн сунгах вэ?

Арын дэвсгэрийг масштаблахын тулд background-size шинж чанарыг ашиглана уу; түүний утгыг 100% гэж тохируулбал дэвсгэр нь хөтчийн цонхны бүх өргөнийг эзлэх болно. Хөтөчүүдийн хуучин хувилбаруудын хувьд жишээ 1-д үзүүлсэн шиг угтвар бүхий тодорхой шинж чанаруудыг ашиглах хэрэгтэй.

Вэб хуудсанд дэвсгэр зураг хэрхэн нэмэх вэ?

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

Хөдөлгөөнт дэвсгэр хийх боломжтой юу?

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

Эхлээд та хөдөлгөөнт зураг үүсгэх хэрэгтэй GIF форматпрограмыг юунд ашиглаж болох вэ Adobe Photoshopэсвэл энэ зорилгод тохирсон бусад. Мөн дэвсгэр зураг болгон ашиглаж болох бэлэн хөдөлгөөнт файлуудын сангууд байдаг. Дараа нь жишээ 1-д үзүүлсэн шиг дэвсгэр загварын шинж чанарыг ашиглан зургийг дэвсгэр болгон нэмнэ.

Хуудасны баруун доод буланд арын дэвсгэр зургийг хэрхэн байрлуулах вэ?

Хуудас дээрх дэвсгэр зургийн байрлалыг хянахын тулд дэвсгэр байрлалын хэв маягийн шинж чанарыг ашигладаг бөгөөд энэ нь зургийн хэвтээ ба босоо координатыг нэгэн зэрэг тохируулдаг. Дэвсгэр зургийн давталтыг цуцлахын тулд no-repeat утгатай background-position шинж чанарыг ашиглана уу.

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

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

Би яаж арын дэвсгэрийг зөвхөн босоо байдлаар давтах вэ?

Веб хуудасны элемент эсвэл цонхны өндөрт холбогдсон гоёл чимэглэлийн шугам эсвэл градиент үүсгэхийн тулд дэвсгэрийн давталт ихэвчлэн шаардлагатай байдаг. Ийм тохиолдолд арын дэвсгэрийг босоо байдлаар давтах нь элементүүдийн хэмжээнээс үл хамааран тогтвортой зургийг өгдөг. Зөвхөн эхлээд та арын дэвсгэр зургийг оёдолгүйгээр давтаж байгаа эсэхийг шалгах хэрэгтэй.

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

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

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

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

Вэбсайт дээрх дэвсгэрийг өөрчлөх хэд хэдэн арга байдаг. Үүний тулд 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 шинж чанар нь хуудсан дээрх дэвсгэр зургийг байрлуулахад зориулагдсан. Та байршлын координатыг хэд хэдэн аргаар тохируулж болно:

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

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

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

• гүйлгэх;


• тогтмол.

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

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

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

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

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