Rumah > hujung hadapan web > html tutorial > Penjelasan terperinci tentang tetapan atribut imej latar belakang dalam pengeluaran halaman html_HTML/Xhtml_Web

Penjelasan terperinci tentang tetapan atribut imej latar belakang dalam pengeluaran halaman html_HTML/Xhtml_Web

WBOY
Lepaskan: 2016-05-16 16:36:22
asal
1779 orang telah melayarinya

Untuk gambar, perkara pertama yang kita fikirkan ialah gambar latar belakang. Kerana banyak hiasan kami dilaksanakan menggunakan gambar latar belakang. Dalam kes ini, mari kita mulakan dengan mengawal imej latar belakang dengan CSS.

Definisi dan penggunaan

Atribut imej latar belakang menetapkan imej latar belakang untuk elemen.

Latar belakang elemen

mengambil keseluruhan saiz elemen, termasuk pelapik dan jidar, tetapi bukan jidar.

Secara lalai, imej latar belakang diletakkan di penjuru kiri sebelah atas elemen dan berulang secara mendatar dan menegak.

1. Imej latar belakang kawalan CSS:

Untuk laman web, apabila kita mula mereka bentuk, kita mungkin tidak terlalu memikirkan apa itu imej latar belakang, kerana kebanyakan mereka hanya mereka bentuk warna latar belakang, saya fikir sebabnya sangat mudah, kerana ia berkaitan dengan latar depan. Sama seperti muzik, ia akan memberi kesan tertentu pada kelajuan membuka halaman web. Walau bagaimanapun, untuk laman web peribadi umum atau blog peribadi, ia adalah sangat diperlukan untuk menunjukkan keperibadian sendiri Sudah tentu, tiada yang terlalu sempurna Iaitu, apabila imej tidak tersedia tetapi Apabila CSS diaktifkan , kandungan gantian tidak akan dipaparkan, jadi tidak disyorkan untuk menggunakan imej latar belakang CSS untuk teks butang navigasi atau situasi yang serupa.
Terdapat banyak sifat CSS untuk mengawal imej latar belakang selagi ia berkaitan dengan imej, kebanyakannya akan digunakan.

(1). Import imej latar belakang:

Sudah tentu yang paling biasa adalah latar belakang dan imej latar belakang.
Kod untuk mereka bentuk imej latar belakang untuk halaman web ialah:

badan {background:url("d:images

atau

badan {background-image:url("d:images


(2) Bagaimana untuk memaparkan imej latar belakang:

Sudah tentu, anda tidak boleh menyatakan kesan yang anda inginkan dengan hanya menggunakan kod di atas. Kerana jika gambar itu kecil, ia akan berjubin Jika ia besar, bar skrol akan muncul untuk memaparkannya, yang tidak baik. Oleh itu, kita perlu melakukan lebih banyak kawalan paparan, iaitu, kita perlu menggunakan background-repeat, Nilainya:

ulang: Nilai lalai. Imej latar belakang berjubin secara menegak dan mendatar

tiada ulangan: Imej latar belakang tidak berjubin

ulang-x: Imej latar belakang hanya berjubin secara mendatar

ulang-y: Imej latar belakang hanya berjubin menegak

Bagi kod tersebut, saya rasa sesiapa yang mengetahui sedikit CSS akan mengetahuinya, seperti berikut
:

body {background:url("d:images


(3), kawalan saiz imej latar belakang:

Tetapi masalahnya, bagaimana jika imej terlalu besar? Untuk laman web yang bagus, sebaiknya jangan gunakan gambar yang terlalu besar, atas sebab-sebab yang disebutkan di atas, ia mempengaruhi kelajuan membuka halaman web. Lebih baik kami menggunakan PS atau FireWorks untuk memprosesnya. Tetapi sejak saya menyebutnya, kami tidak mahu menggunakan CSS untuk mengawal saiz imej.

Saya rasa ramai orang secara semula jadi akan menggunakan kod berikut:


Salin kod

Kodnya adalah seperti berikut: