Imej Latar Belakang Badan Dilakukan dengan Mudah

html

Ciri bagus yang anda dapati di banyak laman web adalah di mana kawasan kandungan tengah kelihatan melapisi halaman dengan bayangan drop di belakangnya. Ini sebenarnya kaedah yang cukup mudah untuk menjadikan blog anda kelihatan cantik (atau laman web lain) dengan satu gambar latar belakang.

Bagaimana ia dilakukan?

  1. Ketahui seberapa luas kandungan anda. Contoh: 750px.
  2. Bina gambar dalam aplikasi ilustrasi anda (saya menggunakan Illustrator) lebih luas daripada kawasan kandungan. Contoh: 800px.
  3. Tetapkan latar gambar ke latar belakang yang ingin anda miliki di setiap sisi blog.
  4. Tambahkan kawasan putih di atas latar belakang.
  5. Terapkan bayang-bayang di kawasan putih yang keluar dari kedua-dua belah kawasan.
  6. Tetapkan luas tanaman dengan ketinggian 1 piksel. Ini akan menjadikan gambar dimuat dengan baik dan padat untuk rendering pantas.
  7. Keluarkan gambar.

Inilah cara saya membuatnya menggunakan Illustrator (perhatikan bahawa saya mempunyai keluasan tanaman lebih tinggi ... hanya supaya anda dapat melihat apa yang saya lakukan):
Latar belakang dengan Illustrator

Berikut adalah contoh bagaimana output akan kelihatan dengan gambar latar:
Contoh Gambar Latar Belakang

Inilah cara untuk menerapkan gambar menggunakan tag gaya badan anda di CSS fail.

latar belakang: # url B2B2B2 ('images / bg.gif') pusat berulang-y;

Berikut adalah potongan tag gaya latar belakang:

  • # B2B2B2 - menetapkan warna latar belakang keseluruhan halaman. Dalam contoh ini, warna kelabu sesuai dengan warna kelabu pada gambar latar.
  • url ('images / bg.gif') - menetapkan gambar latar yang anda mahu gunakan.
  • ulang-y - menetapkan gambar untuk diulang pada paksi-y. Oleh itu, gambar latar akan berulang dari atas ke bawah halaman.
  • tengah - menetapkan gambar di tengah halaman.

Bagus dan senang… satu gambar, satu tag gaya!

2 Komen

  1. 1
  2. 2

Apa yang anda fikir?

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.