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 elemenmengambil 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
ataubadan {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:
tiada ulangan: Imej latar belakang tidak berjubin
ulang-x: Imej latar belakang hanya berjubin secara mendatarulang-y: Imej latar belakang hanya berjubin menegak
Bagi kod tersebut, saya rasa sesiapa yang mengetahui sedikit CSS akan mengetahuinya, seperti berikut
:
(3), kawalan saiz imej latar belakang:
Saya rasa ramai orang secara semula jadi akan menggunakan kod berikut:
Salin kod
Haha, idea itu bagus, tetapi adakah penyemak imbas yang anda gunakan menyokongnya? Saya fikir IE atau FF pasti akan melayannya seolah-olah mereka tidak melihatnya. Mungkin anda akan bertanya, apabila saya mereka gaya forum, adakah ia boleh dicapai? Saya rasa jika hanya kod di atas, ia tidak dapat mengawal gambar, kerana ia hanya mengawal saiz BADAN. Sudah tentu, tiada kawalan di sini. Kalau ID tag yang lain, saya rasa range size tag boleh dikawal, haha tentulah bukan saiz gambar.
Sejujurnya, masalah ini bukan sahaja mengganggu anda, tetapi juga mengganggu saya. Kerana ia hanya nilai harta, bukan objek sebenar. Jika anda berfikir untuk menggunakan kawalan CSS, ingat untuk memberitahu saya.
Tambahan: W3C menerbitkan artikel yang dipanggil "Modul Latar Belakang dan Sempadan CSS Tahap 3" pada 10 September, yang menambahkan beberapa atribut pada latar belakang CSS yang tidak pernah kami lihat sebelum ini:
klip latar belakang :
asal latar belakang :
saiz latar belakang :Saiz latar belakang.
pecah latar belakang :
Walaupun atribut ini tersedia, pada masa ini tiada penyemak imbas yang menyokongnya. Ia sangat menyedihkan.
(4), kawalan kedudukan imej latar belakang:
Jabatan saya mengimport imej latar belakang, tetapi lokasinya benar-benar tidak boleh diterima. Kerana ia dijajarkan ke kiri atas secara lalai. Tetapi kami tidak mahu meletakkannya seperti ini, jadi apa yang perlu kami lakukan? Jangan risau, detik yang menarik akan datang tidak lama lagi, mari kenali latar belakang-kedudukan, latar-kedudukan-x dan latar-kedudukan-y.
a. Tatabahasa asas:
posisi-latar belakang : panjang || |. tengah |
b. Nilai tatabahasa:
panjang: Peratusan |. Nilai panjang yang terdiri daripada nombor titik terapung dan pengecam unit.
c. Contoh:
badan { background-image: url("d:images
Saya hanya akan menulis tiga contoh berikut untuk nilai panjang |.
badan { background-image: url("d:images
Setelah menyatakan begitu banyak contoh, saya rasa anda mempunyai pemahaman tertentu tentang kedudukan.
(5), Tetapan ketelusan imej latar belakang:
Kadang-kadang, kita sentiasa mahu set gambar menjadi lutsinar.
(6). Tetapan berbilang imej latar belakang:
Mengenai tetapan berbilang imej latar belakang, saya melihatnya dalam "Beyond CSS: The Essence of WEB Design Art". Walau bagaimanapun, ia membuatkan saya sangat kesal, kerana penyemak imbas semasa yang menyokong berbilang imej latar belakang dalam satu label adalah terlalu kecil, dan satu-satunya yang saya tahu ialah Apple Safari. Anda mungkin bertanya, bagaimana ini mungkin. Selepas anda membaca contoh ini, saya rasa anda akan terkejut, "Ya tuhan, sebelum CSS3, anda hanya boleh menggunakan satu imej untuk setiap elemen Jika anda ingin mengkajinya, pasang pelayar Safari dengan cepat. Bagi saya, saya percaya ini adalah trend. Pendek kata, sesiapa yang mempunyai keupayaan yang lebih kuat untuk mentafsir CSS akan menjadi trend pembangunan Sesiapa yang mempunyai standard WEB yang sempurna akan menjadi bintang penyemak imbas esok.
Kod adalah seperti berikut:
Salin kod
Kodnya adalah seperti berikut:
badan {
imej latar belakang: