css bagaimana untuk menetapkan imej latar belakang untuk elemen-Soal Jawab bahagian hadapan-php.cn

css bagaimana untuk menetapkan imej latar belakang untuk elemen

醉折花枝作酒筹

Lepaskan： 2021-08-13 10:45:02

asal

2202 orang telah melayarinya

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>

Salin selepas log masuk

Hasil contoh kecil ini ialah

css bagaimana untuk menetapkan imej latar belakang untuk elemen

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!