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

HTML

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

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

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

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

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

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

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

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

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

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

2 санал

  1. 1
  2. 2

Чи юу гэж бодож байна?

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