Rumah >hujung hadapan web >tutorial css >Kod biasa untuk menambahkan imej latar belakang ke Xiaonei.com css code_Experience exchange

Kod biasa untuk menambahkan imej latar belakang ke Xiaonei.com css code_Experience exchange

WBOY
WBOYasal
2016-05-16 12:04:371490semak imbas

Nombor siri Catatan sintaks tanda perihalan Cina
1 Warna latar belakang {warna latar belakang: nilai berangka}
2 Imej latar belakang {background-image: url(URL)|tiada}
3 Ulangan latar belakang {background-repeat: warisi|. no-repeat|repeat|repeat-x|repeat-y}
4 Latar belakang tetap {background-attachment:fixed|scroll}
5 Kedudukan latar belakang {background-position:numeric|atas|bawah|kiri| kanan|. tengah}
6 Gaya belakang {latar belakang: warna latar belakang|imej latar belakang|ulangan latar belakang|lampiran latar belakang|kedudukan latar belakang}

1. Warna latar belakang: background-color

Sintaks: {background-color: value}
Penjelasan: Nilai parameter adalah sama dengan atribut warna
Nota: Dalam HTML, latar belakang mesti ditambahkan pada objek Hanya ada satu cara untuk menukar warna, iaitu dengan membuat jadual dahulu, tetapkan warna latar belakang dalam jadual, dan kemudian masukkan objek ke dalam sel. Ini lebih menyusahkan bukan sahaja ia memerlukan banyak kod, tetapi ia juga memerlukan sedikit masalah dengan saiz dan kedudukan meja. Kini mudah untuk melakukannya secara terus dengan CSS, dan julat objek sangat luas, ia boleh menjadi sekeping teks, atau hanya satu perkataan atau huruf.
Contoh: Tambahkan warna latar belakang pada beberapa teksTambah warna latar belakang pada beberapa teks
Warna belakang jadual: style="background-color:red"

2. Imej latar belakang: imej latar belakang

Sintaks: {background-image: url(URL)|none}
Penjelasan: URL ialah laluan storan imej latar belakang. Jika "tiada" digunakan dan bukannya laluan storan imej latar belakang, tiada apa yang akan dipaparkan.
Contoh: Tambahkan imej latar belakang pada sebahagian daripada teks .imgbgstyle { background-image: url(logo.gif)}
3. Pengulangan latar belakang: ulangan latar belakang

Sintaks: {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
Fungsi: Pengulangan imej latar belakang mengawal jubin imej latar belakang Atau tidak, iaitu, digabungkan dengan kawalan kedudukan latar belakang, imej latar belakang boleh dipaparkan secara berasingan di suatu tempat di halaman web
Penerangan: Julat nilai parameter:
·warisi warisan
·tiada ulangan tidak berulang Jubin imej latar belakang
·ulang
·repeat-x menjadikan jubin imej hanya dalam arah mendatar
·repeat-y menjadikan jubin imej hanya dalam arah menegak
Nota: Jika anda tidak menyatakan a latar belakang Untuk atribut mengulang imej, lalai penyemak imbas adalah untuk imej latar belakang dijubin dalam kedua-dua arah mendatar dan menegak.
4. Latar belakang tetap: lampiran latar belakang

Sintaks: {background-attachment:fixed|scroll}
Penerangan: Julat nilai parameter
·tetap: Apabila halaman web ditatal, imej latar belakang adalah relatif kepada tetingkap penyemak imbas Secara umumnya, tetap
·tatal: Apabila halaman web ditatal, imej latar belakang menatal bersama-sama berbanding tetingkap penyemak imbas
Nota: Imej latar belakang ditetapkan untuk mengawal sama ada imej latar belakang menatal dengan menatal daripada halaman web. Jika anda tidak menetapkan atribut tetap imej latar belakang, imej latar belakang lalai penyemak imbas akan menatal dengan menatal halaman web. Untuk mengelakkan imej latar belakang yang terlalu mewah daripada merosakkan penglihatan penonton semasa menatal, anda boleh menyahhimpun imej latar belakang dan kandungan teks, yang harus digabungkan dengan tetingkap penyemak imbas.
Contoh: CSS yang menghalang corak latar belakang daripada "bergulung" dengan teks
BODY { background: purple url(bg.jpg background-repeat:repeat-y; background-attachment:fixed }
5. Kedudukan latar belakang: kedudukan latar belakang

Sintaks: {kedudukan latar belakang: nilai|atas|bawah|kiri|kanan|tengah}
Fungsi: Kedudukan latar belakang digunakan untuk mengawal kedudukan imej latar belakang yang dipaparkan pada laman web tersebut.
Penerangan: Julat nilai parameter
·Parameter angka dengan unit panjang
·atas: relatif kepada bahagian atas objek latar depan
·bawah: relatif kepada bahagian bawah objek latar depan
·kiri : relatif kepada objek latar depan Jajaran kiri
·kanan: Jajaran kanan berbanding objek latar depan
·tengah: Jajaran tengah berbanding objek latar depan
·Hubungan berkadar
Kata kunci diterangkan seperti berikut:
kiri atas = kiri atas = 0% 0 %
atas = atas tengah = tengah atas = 50% 0%
kanan atas = atas kanan = 100% 0%
kiri = kiri tengah = tengah kiri = 0% 50%
tengah = tengah tengah = 50% 50%
kanan = kanan tengah = tengah kanan = 100% 50%
kiri bawah = kiri bawah = 0% 100%
bawah = tengah bawah = tengah bawah = 50% 100%
kanan bawah = bawah kanan = 100% 100%
Nota: Jika pusat dalam parameter digunakan di hadapan parameter lain, ia bermakna pemusatan mendatar; digunakan selepas parameter lain, ia bermakna pemusatan menegak.
6. Gaya latar belakang: latar belakang

Sintaks: {latar belakang:warna latar belakang|imej latar belakang|ulangan latar belakang|lampiran latar belakang|kedudukan latar belakang}
Fungsi: Atribut latar belakang ialah latar belakang yang lebih jelas— Shorthand untuk atribut hubungan. Berikut ialah beberapa pengisytiharan latar belakang:
Contoh:
BODY { latar belakang: url putih(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { latar belakang: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
JADUAL { background: #0c0 url(leaves.jpg) no-repeat bawah kanan }
Nota: Apabila nilai bukan Bila ditentukan, nilai awalnya akan diterima. Sebagai contoh, dalam tiga peraturan pertama di atas, sifat kedudukan latar belakang akan ditetapkan kepada 0% 0%. Untuk mengelakkan konflik dengan helaian gaya pengguna, latar belakang dan warna harus dinyatakan bersama.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn