Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >css bagaimana untuk menetapkan imej latar belakang untuk elemen
css bagaimana untuk menetapkan imej latar belakang untuk elemen
- 醉折花枝作酒筹asal
- 2021-08-13 10:45:022208semak imbas
Dalam artikel sebelum ini, kami telah mempelajari tentang kaedah menentukan kawasan lukisan latar belakang, sila lihat "Mahir Menggunakan CSS untuk Menentukan Kawasan Lukisan Latar Belakang". Kali ini kita akan melihat bagaimana untuk menetapkan imej latar belakang untuk elemen Anda boleh merujuknya jika perlu.
Apabila kita ingin menggunakan gambar sebagai latar belakang sesuatu elemen, apakah yang perlu kita lakukan?
Mari kita lihat contoh kecil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-image: url("images/2.jpg");
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>Hasil contoh kecil ini ialah
Seperti yang anda lihat, gambar yang kita suka menjadi latar belakang elemen. Ini kerana kami menggunakan atribut background-image.
Mari kita lihat hartanah ini.
Atribut imej latar belakang menetapkan imej latar belakang untuk elemen. Latar belakang elemen menduduki keseluruhan saiz elemen, termasuk pelapik dan jidar, tetapi bukan jidar. Secara lalai, imej latar belakang diletakkan di sudut kiri atas elemen dan berulang secara mendatar dan menegak.
Peringatan hangat:
Sila tetapkan warna latar belakang yang tersedia, supaya jika imej latar belakang tidak tersedia, halaman masih boleh mendapat kesan visual yang baik .
Apabila melukis, imej disusun dalam arah z. Imej yang dinyatakan dahulu akan dilukis di atas imej yang ditentukan kemudian. Jadi imej pertama yang dinyatakan adalah "paling dekat dengan pengguna".
Kemudian sempadan elemen akan dilukis di atasnya dan background-color akan dilukis di bawahnya. Hubungan antara lukisan imej, kotak dan sempadan kotak perlu ditakrifkan dalam atribut CSS background-clip dan background-origin.
Jika imej yang ditentukan tidak boleh dilukis (contohnya, fail yang diwakili oleh URI yang ditentukan tidak boleh dimuatkan), penyemak imbas akan menganggap situasi ini seolah-olah nilainya ditetapkan kepada tiada.
Pembelajaran yang disyorkan: tutorial video css
Atas ialah kandungan terperinci css bagaimana untuk menetapkan imej latar belakang untuk elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!