Биеийн арын зургийг хялбархан хийсэн

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

Яаж хийдэг юм бэ?

1. Таны агуулга хэр өргөн байгааг тодорхойл. Жишээ: 750px.
2. Зургийн аппликешнд (би Illustrator ашигладаг) дүрсийг агуулгын талбайн хэмжээнээс илүү өргөнөөр бүтээх боломжтой. Жишээ: 800px.
3. Блогын хоёр тал дээр зургийнхаа арын дэвсгэрийг хүссэн дэвсгэр дээрээ тохируулна уу.
4. Арын дэвсгэр дээр цагаан бүс нэмнэ үү.
5. Бүс нутгийн аль аль талаас нь гадагшлуулах цагаан бүсэд сүүдэр тавиарай.
6. Таримлын талбайн өргөнийг 1 пикселээр өндөрт тохируулна уу. Энэ нь дүрсийг хурдан буулгахын тулд аятайхан, авсаархан татаж авах боломжийг олгоно.
7. Зургийг гаргана уу.

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

Гарцыг арын зурагтай хэрхэн харуулах жишээг энд харуулав.

Биеийн хэв маягийн шошгыг ашиглан зургийг хэрхэн яаж ашиглахыг энд харуулав CSS файл.

дэвсгэр: # B2B2B2 url ('images / bg.gif') давтан y төв;

Энд арын хэв маягийн шошгыг задлах:

• # B2B2B2 - хуудасны ерөнхий дэвсгэр өнгийг тохируулна. Энэ жишээнд дэвсгэр зураг дээрх саарал өнгийг тааруулах нь саарал өнгөтэй байна.
• url ('images / bg.gif') - ашиглахыг хүсч буй дэвсгэр зургийг тохируулна.
• давтан-у - y тэнхлэг дээр давтахаар дүрсийг тохируулна. Тиймээс арын зураг нь хуудасны дээрээс доош хүртэл давтагдах болно.
• төв - зургийг хуудасны төвд байрлуулна.

Сайхан бөгөөд хялбар ... нэг зураг, нэг загварын шошго!