Тогтмол, гүйлгэх дэвсгэр зургууд. Тогтмол, гүйлгэх дэвсгэр зургууд Зураг хуудасны дэвсгэр болгон - CSS

24.08.2023

Хүснэгтийн доор суурин дэвсгэр зургийг суулгахдаа бид текст болон бусад зүйлс байх болно хэрэгтэй мэдээлэл, дараах эффект бий болно: тексттэй хүснэгтийг гүйлгэх үед түүний доорх дэвсгэр хөдөлгөөнгүй хэвээр байх бөгөөд хүснэгттэй хамт хөдлөхгүй. Энд байгаа шиг:

Энэ нөлөө нь давхар давхарласан мэт хуурмаг байдлыг бий болгож, таны хуудсан дээр бага зэрэг зай гаргах болно.
Ихэвчлэн хөдөлгөөнгүй зургийн дэвсгэрийн эффектийг CSS загварын хуудсанд дараах шинж чанаруудыг тохируулснаар хүрдэг: background-attachment: fixed; Бид .css өргөтгөлтэй тусдаа баримт бичигт байгаа CSS загварын хуудасны тухай ярьж байна

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

1-р арга.

Бид арын дэвсгэр болох зургийг сонгодог. Энэ тохиолдолд би энэ зургийг авдаг (бүтэн хэмжээг харахын тулд өнгөц зураг дээр дарна уу):

Баримтжуулах css загварууд, бид BODY-ийн параметрүүдийг тохируулахдаа дараах бүтцийг оруулна уу:

BODY(арын дэвсгэр зураг: url(арын зургийн хаяг); дэвсгэр-хавсралт: тогтмол; дэвсгэр-давталт: давтагдахгүй; дэвсгэр-байрлал: дээд;)

Энэ тохиолдолд бид дэвсгэр зураг болгон авдаг том зурагбүтэн дэлгэц (жишээлбэл, 1280 х 1024 пиксел).

Жич: Хэрэв танд css загварын баримт бичиг байхгүй бол та -д заасны дагуу нэгийг үүсгэж, ижил хичээлд заасны дагуу html хуудасны кодонд css загварын баримт бичигт холбоос нэмэх хэрэгтэй.

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

Арын дэвсгэр зураг: url (арын зургийн хаяг); - Манай дэвсгэр зургийн хаягийг 1280-аас 1024 пикселээр оруулна уу.

Суурь-хавсралт: тогтмол; - бид арын дэвсгэр дээр тогтмол, өөрөөр хэлбэл хөдөлгөөнгүй байх зааврыг өгдөг.

Суурь-давталт: давтагдахгүй; - Бид арын дэвсгэр дээр хуулбарлахгүй байх заавар өгдөг.

Суурь байрлал: дээд; - дэвсгэр зургийн байрлалыг тохируулах: хуудасны дээд ирмэг дээр тохируулах.

Тиймээс бид энэ бүтцийг BODY доторх css загварын баримт бичигт оруулав:

Би бүтээсэн энгийн ширээДэлгэцийн 70% дээр, тодорхой болгох үүднээс текст болон хоёр зураг байрлуулсан. Энэ бол хуудаснаас олж авсан зүйл юм: (хөдөлгөөнгүй дэвсгэрийн эффектийг харахын тулд хуудсыг дээш доош гүйлгэнэ үү).

2-р арга.

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

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

BODY (арын дэвсгэр зураг: url(арын зургийн хаяг); дэвсгэр хавсралт: тогтмол; )

Энд бид зөвхөн параметрийг тохируулна: background-attachment: fixed; - өөрөөр хэлбэл тэд арын дэвсгэр зургийг хөдөлгөөнгүй болгох зааварчилгааг хөтөч дээр зааж өгсөн. Бид зургийг "үржүүлж болохгүй" гэж хэлээгүй тул бүхэл бүтэн дэлгэц дээр үржих ёстой.

3 дахь арга.

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

BODY (арын дэвсгэр:#e0ddd8 url(арын зургийн хаяг) зүүн дээд талд давтагдахгүй зассан)

Background:#e0ddd8 url (арын зургийн хаяг) - дэвсгэр зургийн доорх өнгө нь шаргал өнгөтэй, тухайн зургийн дэвсгэр өнгөтэй тохирч байна. Энэ нь бидний зургийг арын дэвсгэр рүү шилжүүлэхэд харагдахгүй байхаар хийгдсэн (зураг нь дэлгэцийн зөвхөн нэг хэсгийг эзэлдэг).

Давтагдахгүй - зураг үрждэггүй (Миний дуртай Америкийн жүжигчдийн нэг Роберт Дуваллтай нэг том зураг байна).

Тогтмол - дэвсгэр нь тогтмол, өөрөөр хэлбэл хөдөлгөөнгүй.

Зүүн дээд талд - дэлгэцийн зүүн дээд ирмэгтэй зэрэгцүүлсэн (та өөрийн хүссэнээр зургийг баруун талд, сайтын хүснэгтийг зүүн талд байрлуулж болно. Үүнийг хийхийн тулд хүснэгтийн html баримт бичигт дараахь зүйлийг бичнэ.

Трепачев Д.П. 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 auto; текстийг зэрэгцүүлэх: зөвтгөх; үсгийн жин: тод; үсгийн хэмжээ: 20px)

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

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

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

HTML ашиглан дэвсгэр зураг

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

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

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

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

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

CSS ашиглан дэвсгэр зураг

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

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

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

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

товч мэдээлэл

CSS хувилбарууд

Үнэ цэнэ

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

HTML5 CSS2.1 IE Cr Op Sa Fx

дэвсгэр хавсралт

Жишээ текст

HTML5 CSS3 IE Cr Op Sa Fx

дэвсгэр хавсралт

Объект загвар

document.getElementById("elementID ").style.backgroundAttachment

Хөтөчүүд

Internet Explorer 6 дээр fixed нь зөвхөн шошгон дээр ажилладаг эсвэл .

Internet Explorer-ийн 7.0 хүртэлх хувилбарууд нь удамших утгыг дэмждэггүй.

Chrome нь 4.0 хувилбараас хойш локал утгыг дэмждэг.

Safari нь 5.0 хувилбараас хойш локал утгыг дэмждэг.

Firefox нь local гэсэн утгыг ойлгохгүй байна.

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

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

Даалгаврыг гүйцэтгэхийн тулд та 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) нээж, мөрийг олох хэрэгтэй "бие"ба параметр "арын дэвсгэр". Үүний дараа та холбоосыг хуулж, интернет хөтөч дээрээ буулгаж, арын дэвсгэр дээрх зургийг үзэх боломжтой болно.

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