Masalah pemosisian gambar latar belakang css

Penulis：Eve Cole Waktu Pembaruan：2009-06-12 17:45:20

Dikutip dari karya orang lain~~~Bagus sekali Tata Bahasa:
posisi latar belakang : panjang ||
posisi latar belakang: posisi ||

|.
Mengatur atau mengambil posisi gambar latar belakang objek. Atribut gambar latar belakang harus ditentukan terlebih dahulu. Penempatan properti ini tidak terpengaruh oleh pengaturan padding objek.
Nilai defaultnya adalah: 0% 0%. Saat ini, gambar latar belakang akan ditempatkan di sudut kiri atas area konten objek tidak termasuk padding.
Jika hanya satu nilai yang ditentukan, nilai tersebut akan digunakan untuk absis. Ordinatnya akan default ke 50%. Jika dua nilai ditentukan, nilai kedua akan digunakan untuk ordinat.
Jika nilai settingnya tepat di tengah, karena tepat sebagai nilai absis akan menimpa nilai tengah, maka gambar background akan diposisikan di sebelah kanan.
Properti skrip yang sesuai adalah backgroundPosition.

background-position -- mendefinisikan nilai posisi

nilai awal

x-pos y-pos

: 0% 0%

Warisan: Tidak
Berlaku untuk: semua elemen
latar belakang: latar belakang.posisi: posisi.*************************** Poin penting yang perlu dijelaskan: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transisi//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<kepala>
<title>Masalah penentuan posisi latar belakang</title>
<gaya tipe="teks/css">
<!--
*{
margin:0;
bantalan:0;
}

tubuh {
perataan teks:tengah;
latar belakang:#000;
}

#wadah{
lebar:1000 piksel;
margin:0 otomatis;
latar belakang:#fff url(images/bg.jpg) tanpa pengulangan kiri atas;
tinggi:500 piksel;
}
-->
</gaya>
</kepala>
<tubuh>
<div id="wadah"> </div>
</tubuh>
</html>1.background-position:left top; (lihat Gambar 1). Sudut kiri atas gambar latar sejajar dengan sudut kiri atas wadah (container), dan bagian berlebihnya disembunyikan. Setara dengan background-position:0,0; juga setara dengan background-position:0%,0%;2.background-position:right bottom; Sudut kanan bawah gambar latar belakang sejajar dengan sudut kanan bawah wadah, dan bagian berlebihnya disembunyikan. Setara dengan posisi latar belakang: 100%, 100% juga setara dengan posisi latar belakang: lebar wadah (container) - lebar gambar latar belakang, tinggi wadah (container) - tinggi gambar latar belakang 3. posisi latar belakang: 500px 15px ;(Lihat Gambar 3). Gambar latar belakang dipindahkan 500px ke kanan dan 15px ke bawah dari sudut kiri atas wadah, dan bagian berlebihnya disembunyikan. 4.posisi latar belakang:-500px -15px (lihat Gambar 4). Gambar latar belakang dipindahkan 500px ke kiri dan 15px ke atas dari sudut kiri atas wadah, dan bagian berlebihnya disembunyikan. 5.posisi latar belakang:50% 50%; (lihat Gambar 5). Setara dengan kiri: {lebar wadah - lebar gambar latar belakang}*persentase kiri, bagian berlebih disembunyikan. Setara dengan kanan: {tinggi wadah (container) - tinggi gambar latar belakang}*persentase kanan, bagian berlebihnya disembunyikan. Misalnya: posisi latar belakang:50% 50%; yaitu, posisi latar belakang: (1000-2000)*50%px, (500-30)*50%px yaitu, posisi latar belakang:-500px, 235px ; yaitu, gambar latar belakang Pindahkan 500px ke kiri dari sudut kiri atas wadah dan 235px ke bawah; 6. (Dalam hal ini, gambar latar belakang harus berupa bg2.jpg untuk melihat efeknya. Ketinggian bg.jpg terlalu kecil dan efeknya tidak terlihat jelas) posisi latar belakang :-50% -50%; Setara dengan kiri: -{{lebar wadah (wadah) - lebar gambar latar belakang}*persentase kiri (semua persentase adalah nilai positif)}, dan bagian berlebihnya disembunyikan. Setara dengan kanan: -{{tinggi wadah (wadah) - tinggi gambar latar belakang}*persentase kanan (semua persentase adalah nilai positif)}, dan bagian berlebihnya disembunyikan. Misalnya: posisi latar belakang:-50% -50%; adalah posisi latar belakang:-{(1000-500)*50%}px,-{(500-360)*50%}px adalah posisi latar belakang: - 250px,-70px; yaitu, gambar latar belakang bergerak 250px ke kiri dari sudut kiri atas wadah dan 70px ke atas;