Ajar anda helah untuk melaraskan saiz imej latar belakang css-Soal Jawab bahagian hadapan-php.cn

Ajar anda helah untuk melaraskan saiz imej latar belakang css

醉折花枝作酒筹

Lepaskan： 2021-08-13 15:33:28

asal

3285 orang telah melayarinya

Dalam artikel sebelum ini, kami belajar tentang cara menetapkan imej latar belakang untuk diulang. Sila lihat "Cara menggunakan css untuk menetapkan sama ada imej latar belakang diulang atau tidak". Kali ini kita akan belajar bagaimana untuk menetapkan saiz imej latar belakang Anda boleh merujuknya jika perlu.

Apabila kita mahu imej latar belakang di tangan kita menduduki keseluruhan skrin, apakah yang perlu kita lakukan?

Mari kita lihat Little Chestnut.

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-size: 400px;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

Salin selepas log masuk

Hasil contoh kecil ini ialah

Ajar anda helah untuk melaraskan saiz imej latar belakang css

Anda dapat melihat bahawa apabila kita menukar nilai atribut tertentu, latar belakang juga menjadi lebih besar apabila nilai berubah. Jadi apa yang kita lihat pada atribut ini? Anda boleh melihat bahawa perkara yang kami ubah suai ialah nilai atribut saiz latar belakang.

Kemudian mari kita lihat maksud atribut ini.

Atribut saiz latar belakang menentukan saiz imej latar belakang. Imej boleh mengekalkan dimensi asalnya, diregangkan ke saiz baharu atau diskalakan agar muat dalam ruang elemen yang tersedia sambil mengekalkan perkadaran asalnya.

Mari kita lihat sintaks atribut ini.

background-size: length|percentage|cover|contain;

Salin selepas log masuk

Saya akan terus membuat jadual untuk penjelasan nilai ini, anda boleh lihat.

Ajar anda helah untuk melaraskan saiz imej latar belakang css

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Ajar anda helah untuk melaraskan saiz imej latar belakang css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!