imej latar belakang (harta CSS)

3

Keterangan Harta ini menetapkan imej latar belakang elemen melalui URI yang ditentukan. Imej diletakkan di atas warna latar belakang, dan jika imejnya adalah legap, warna latar belakang tidak akan kelihatan di bawahnya. Apabila anda menetapkan imej latar belakang, juga menetapkan warna latar belakang, jika mungkin, sekiranya imej tidak tersedia. Latar belakang elemen adalah kawasan yang diliputi oleh lebar dan ketinggian elemen tersebut (sama ada dimensi tersebut ditetapkan secara eksplisit, atau kandungan menentukannya); Ia juga termasuk kawasan yang diliputi oleh padding dan sempadan. Satu latar belakang warna (atau imej latar belakang) yang digunakan untuk elemen akan muncul di bawah kandungan latar belakang elemen itu, dan kawasan yang diliputi oleh padding dan sifat sempadan untuk elemen. Kawasan liputan ini jelas di mana elemen mempunyai telus (atau bertitik atau putus -putus) sempadan, dan latar belakang dilihat di bawah sempadan (atau antara titik -titik). Perhatikan bahawa versi Internet Explorer sehingga dan termasuk 6 tidak menyokong sempadan telus. Sesetengah kawasan elemen yang dipersoalkan mesti kelihatan supaya imej latar belakang dapat ditunjukkan. Jika elemen tidak mempunyai ketinggian intrinsik (sama ada ditakrifkan oleh kandungan atau dimensinya), latar belakang tidak akan mempunyai ruang untuk dipaparkan. Sekiranya elemen hanya mengandungi kanak -kanak terapung yang belum dibersihkan -lihat jelas -lagi, latar belakang tidak akan dipaparkan, kerana ketinggian elemen akan menjadi sifar. Secara lalai, imej latar belakang diletakkan di bahagian atas (kedudukan latar belakang) elemen; Ia diulang di sepanjang paksi x dan y (latar belakang-repeat) dan akan menatal dengan dokumen. Ini adalah tetapan lalai yang dikenakan jika anda tidak secara jelas menetapkan mana -mana orang lain, dan boleh diselaraskan dengan sifat latar belakang yang lain. Rujuk kepada perkara lain yang berkaitan di bawah untuk kaedah yang boleh anda gunakan untuk meletakkan dan mengawal imej.

Contoh

Peraturan gaya ini memberikan latar belakang imej ke elemen dengan id "contoh":

#example {
  background-image:
  ➥    url(images/bg.gif);
}

nilai

Nilai URI Menentukan lokasi di mana imej boleh didapati. Nilai tiada yang memastikan tiada imej latar belakang akan dipaparkan; Ini adalah tetapan lalai, jadi anda tidak perlu menentukannya secara eksplisit melainkan jika anda ingin menimpa pengisytiharan imej latar belakang sebelumnya. Nilai mewarisi akan menyebabkan unsur mewarisi imej latar belakang ibu bapanya. Pendekatan ini biasanya tidak akan diambil, kerana imej latar belakang yang diwarisi elemen kemungkinan besar akan bertindih imej ibu bapa. Dalam kebanyakan kes, imej latar belakang ibu bapa akan dapat dilihat melalui latar belakang telus elemen melainkan jika satu lagi imej latar belakang atau warna latar belakang telah ditetapkan.

Soalan Lazim (Soalan Lazim) Mengenai Imej Latar Belakang CSS

bagaimana saya boleh menetapkan imej latar belakang untuk menutup seluruh elemen dalam CSS? . Ini akan skala imej sebanyak mungkin untuk mengisi bekas, sambil mengekalkan nisbah aspeknya. Berikut adalah contoh:

body {
latar belakang-imej: url ('image.jpg');
saiz latar belakang: cover;
}
ini akan membuat penutup imej Seluruh badan laman web. imej. Anda boleh menentukan kedudukan dari segi peratusan, piksel, atau kata kunci seperti 'atas', 'bawah', 'kiri', 'betul', 'pusat'. Berikut adalah contoh:
body {

latar belakang-imej: url ('image.jpg');

latar belakang-kedudukan: kanan atas;

}

ini akan meletakkan imej di sudut kanan atas badan.

Bagaimana saya dapat mengulangi imej latar belakang dalam css? pengulangan imej latar belakang. Nilai-nilai boleh 'ulang', 'ulangan-x', 'ulang-y', atau 'tidak berulang'. Inilah contoh: latar belakang-imej: url ('image.jpg');
latar belakang-repeat: ulangan-x; imej secara mendatar di seluruh badan.

Bagaimana saya boleh menetapkan pelbagai imej latar belakang dalam css? Imej dalam harta 'latar belakang', dipisahkan oleh koma. Imej pertama dalam senarai adalah lapisan paling atas. Berikut adalah contoh: latar belakang-imej: url ('image1.jpg'), url ('image2.jpg'); untuk badan.

Bagaimana saya boleh membuat imej latar belakang yang ditetapkan dalam CSS? Buat imej latar belakang tetap, jadi ia tidak tatal dengan seluruh halaman. Berikut adalah contoh: latar belakang-imej: url ('image.jpg');

latar belakang-attachment: tetap;
}
ini akan menjadikan imej latar belakang Tetap.

Bagaimana saya boleh menetapkan imej latar belakang dari URL luaran dalam CSS?

Anda boleh menetapkan imej latar belakang dari URL luaran dengan menyatakan URL dalam harta 'latar belakang'. Berikut adalah contoh:

body {
latar belakang-imej: url ('https://example.com/image.jpg'); URL yang ditentukan. Menentukan warna dalam harta 'latar belakang'. Warna ini akan dipaparkan jika imej latar belakang tidak dapat dimuatkan. Berikut adalah contoh:

body {
latar belakang-imej: url ('image.jpg');

latar belakang warna: #f00;

}

Ini akan menetapkan merah warna sandaran untuk imej latar belakang.

Bagaimana saya boleh menggabungkan imej latar belakang dengan warna latar dalam css? CSS membolehkan anda menggabungkan imej latar belakang dengan warna latar belakang. Berikut adalah contoh:

body {
latar belakang-imej: url ('image.jpg');
latar belakang warna: #f00; 🎜>}
Ini akan menggabungkan imej latar belakang dengan warna latar belakang merah menggunakan mod campuran 'Multiply'. CSS?

Anda boleh menetapkan imej latar belakang untuk elemen tertentu dengan menentukan pemilih elemen sebelum harta 'latar belakang'. Berikut adalah contoh:

#myelement { latar belakang-imej: url ('image.jpg'); Bagaimana saya boleh menetapkan imej latar belakang untuk elemen pseudo dalam css? anda boleh menetapkan imej latar untuk Pseudo-elemen dengan menyatakan pemilih elemen pseudo sebelum harta 'latar belakang'. Inilah contoh:

div :: Sebelum { kandungan: "";
latar belakang-imej: url ('image.jpg'); Imej latar belakang untuk ':: sebelum' pseudo-elemen elemen 'div'.

Atas ialah kandungan terperinci imej latar belakang (harta CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!