Saat kita mempelajari gaya situs web lain, kita sering menemukan situasi di mana gambar yang sama digunakan di banyak atribut latar belakang untuk memenuhi penggunaan berbagai bagian halaman web. Jika Anda membuka gambar semacam ini dan melihatnya, Anda akan menemukan bahwa gambar ini berisi banyak gambar kecil, seperti:
Contoh lain:
Gambar-gambar kecil ini adalah bagian-bagian setelah keseluruhan gambar dibagi. Setiap bagian ditempatkan pada satu gambar alih-alih disimpan sebagai gambar terpisah. Kita semua tahu bahwa tujuannya adalah untuk mengurangi jumlah permintaan http dan menghemat waktu dan bandwidth .
Jadi bagaimana cara menyadari bahwa hanya sebagian gambar yang ditampilkan di tempat berbeda? Ini menggunakan masalah penempatan gambar latar belakang yang akan kita bicarakan hari ini. Saya yakin banyak orang yang tertekan dengan masalah ini, dan teman-teman sering bertanya kepada saya, jadi hari ini saya akan menjelaskannya secara sistematis:
Kita tahu bahwa ketika menggunakan gambar sebagai latar belakang, css harus ditulis seperti ini . Ambil wadah div sebagai misal bisa juga body, background td, p, dll sama saja.
Kode: div{ background: #FFF url(image) no-repeat fixed xy;} |
Nilai atribut background disini adalah:
#FFF warna background: (nilai warna, tempat gambar background tidak tertutup, atau bila ada tidak ada gambar latar belakang warna latar belakang)
gambar latar belakang gambar: (Ini alamat gambarnya)
Apakah no-repeat diulang: (Bila gambar lebih kecil dari ukuran wadah, gambar akan disusun berulang kali untuk mengisi wadah secara default. No-repeat berarti tidak ada pengulangan. Hanya pada saat inilah koordinat posisi selanjutnya akan menjadi berguna.)
Apakah latar belakang tetap bergulir dengan wadah: (Ada dua nilai opsional, gulir bergulir, tetap tidak bergulir, defaultnya adalah gulir)
Penempatan gambar latar belakang xy: (Perhatikan bahwa pemosisian hanya bermakna jika tidak ada pengulangan. Ini adalah fokus hari ini)
Kita perlu memperjelas beberapa poin dalam pemosisian gambar latar belakang:
1. Nilai pertama dari dua nilai adalah pemosisian horizontal, kami menyebutnya pemosisian sumbu x. Nilai terakhir adalah posisi memanjang, yang kita sebut posisi sumbu y. Jika hanya ada satu nilai, defaultnya adalah arah sumbu x. Saat ini, arah sumbu y defaultnya adalah sejajar ke atas dan ke bawah, yaitu tengah.
2. Titik asal sumbu koordinat adalah titik sudut kiri wadah yang bersesuaian.
3. Panah sumbu y koordinat ini mengarah ke bawah, yaitu nilai xy di pojok kanan bawah (di dalam wadah) semuanya positif.
4. Nilai xy masing-masing mewakili nilai titik sudut kiri gambar latar relatif terhadap titik asal koordinat (yaitu titik kiri wadah).
5. Nilai xy dapat dinyatakan dalam persentase atau px.
6. xy juga dapat dinyatakan dengan lima metode penyelarasan "kiri, kanan, atas, bawah, tengah", tetapi perhatikan: ketika dinyatakan dengan "kiri, kanan, atas, bawah, tengah", aturan penyelarasan diterapkan, bukan daripada aturan koordinat . Bila x di sebelah kiri berarti sisi kiri gambar sejajar dengan sisi kiri wadah. Bila tepat berarti sisi kanan gambar sejajar dengan sisi kanan wadah. Bila y berada di atas , berarti bagian atas gambar sejajar dengan bagian atas wadah. Bila bagian bawah berarti bagian atas gambar sejajar dengan bagian bawah wadah. itu berarti keselarasan terpusat.
7. Jika xy dinyatakan dalam persentase atau px, nilainya bisa berupa angka negatif. Kita dapat dengan mudah memahami arti bilangan negatif dengan menerapkan aturan koordinat. Jika x bilangan negatif, berarti titik sudut kiri gambar berada di sebelah kiri titik sudut kiri wadah. artinya titik sudut kiri gambar berada di atas titik tetap kiri wadah. Artinya, ke kiri dan ke atas di luar cakupan wadah.
Di bawah ini saya menggunakan beberapa ilustrasi untuk mengilustrasikan beberapa situasi . Blok biru mewakili gambar, dan kotak bertitik mewakili wadah (bisa berupa div, td, atau langsung isi). Saya menggunakan warna putih untuk menunjukkan bagian yang terlihat, dan apa yang berada di luar cakupan wadah tidak terlihat. Koordinat titik tetap kiri wadah adalah (0, 0).
Yang pertama, gambar background sejajar dengan kiri atas konten, 0px 0px juga bisa ditulis kiri atas
Pada gambar kedua, gambar latar berada di tengah wadah, dan koordinat titik tetap bernilai positif.
Pada gambar ketiga, gambar latar berada di sisi kiri atas wadah, dan koordinat titik tetapnya negatif
------------------------- ------------------------ ----------------------------------------
Pada titik ini kita dapat memahami bagaimana menggunakan nilai pemosisian di latar belakang untuk memposisikan gambar latar belakang secara akurat. Mari kita kembali dan melihat dua gambar yang diperkenalkan di awal. Kita dapat menggunakan: pemosisian latar belakang dan hanya terlihat di dalam wadah .Properti untuk memanggil bagian tertentu dari keseluruhan gambar sesuka hati.
Namun untuk kemudahan pemanggilan, kita perlu memperhatikan beberapa aturan dalam menyusun gambar-gambar kecil tersebut, misalnya: jarak antara gambar-gambar kecil biasanya sama dengan ukuran wadah di mana gambar-gambar kecil itu dipanggil, atau jaraknya lebih besar. agar tidak ditampilkan dalam wadah. Tunjukkan kepada kami gambar yang tidak ingin kami tampilkan!
Selain itu, jika positioningnya menggunakan persentase, algoritmanya agak khusus. Izinkan saya memberi Anda sebuah contoh:
Kode: background:#FFF url(image) no-repeat fixed 50% -30%; |
Pada saat ini, di mana seharusnya gambar berada di dalam container? Rumus algoritmanya adalah sebagai berikut:
posisi koordinat dari simpul kiri bayangan dari simpul kiri wadah untuk
x: (lebar wadah - lebar gambar) x50%
y: (tinggi wadah - tinggi gambar) x (-30%)
Hasil yang diperoleh menerapkan aturan koordinat. Jika selisihnya negatif dan persentasenya positif, maka hasil operasinya negatif. Jika selisihnya negatif dan persentasenya negatif, maka hasilnya positif. Secara keseluruhan, operasi di sini sesuai dengan algoritma. Dengan memasukkan hasil operasi ke dalam aturan koordinat, Anda bisa mendapatkan posisi gambar.
Misalnya: wadahnya lebar: 600px; tinggi: 600px; dan gambarnya lebar: 200px tinggi: 200px;
Dengan menggunakan style di atas, kita dapat memperoleh posisi gambar sebagai:
x: (600 piksel-200 piksel)*50%
kamu: (600px-200px)*(-30%)
Seperti yang ditunjukkan di bawah ini:
