cari

Rumah >hujung hadapan web >tutorial css >Gaya css mana yang boleh membuat imej memenuhi skrin

Gaya css mana yang boleh membuat imej memenuhi skrin

WBOY
WBOYasal
2021-12-01 17:36:436701semak imbas

Dalam CSS, anda boleh menggunakan gaya "background-size:cover;" untuk membuat imej memenuhi skrin Atribut "background-size" digunakan untuk menetapkan saiz imej latar belakang nilai atribut ialah "penutup", Imej latar belakang akan berkembang cukup besar supaya ia memenuhi skrin sepenuhnya.

Gaya css mana yang boleh membuat imej memenuhi skrin

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Gaya css yang manakah boleh menjadikan gambar memenuhi skrin

Dalam css, anda boleh menggunakan atribut saiz latar belakang untuk membuat gambar? mengisi keseluruhan skrin. Mula-mula kita Tetapkan imej sebagai imej latar belakang badan dan kemudian gunakan atribut saiz latar belakang untuk membuat imej mengisi skrin.

Apabila nilai atribut ini adalah penutup, kembangkan imej latar belakang kepada saiz yang cukup besar supaya imej latar belakang sepenuhnya meliputi kawasan latar belakang. Sesetengah bahagian imej latar belakang mungkin tidak dipaparkan dalam kawasan penambat latar belakang.

Contoh adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body style="background-image: url(1118.02.png);">
    <style>
body{
  background-size: cover;
}
    </style>
</body>
</html>

Hasil keluaran:

Gaya css mana yang boleh membuat imej memenuhi skrin

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Gaya css mana yang boleh membuat imej memenuhi skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk menukar saiz fon dalam div menggunakan cssArtikel seterusnya：Bagaimana untuk menukar saiz fon dalam div menggunakan css

Artikel berkaitan

Lihat lagi