Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar saiz imej latar belakang dengan css
Bagaimana untuk menukar saiz imej latar belakang dengan css
- 青灯夜游asal
- 2021-10-12 18:13:2826926semak imbas
Dalam CSS, anda boleh menggunakan atribut saiz latar belakang untuk menukar saiz imej latar belakang Fungsi atribut ini adalah untuk menentukan saiz imej latar belakang anda boleh menukar saiz imej nilai atribut kepada nilai panjang atau peratusan, atau dengan Tetapkan nilai atribut pada penutup dan mengandungi kata kunci untuk menskalakan imej.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS, jika anda ingin menukar saiz imej latar belakang, anda boleh menetapkan atribut saiz latar belakang.
Atribut saiz latar belakang boleh menentukan saiz imej latar belakang. Format sintaks:
background-size: length|percentage|cover|contain;
panjang Tetapkan ketinggian dan lebar imej latar belakang. Nilai pertama menetapkan lebar, dan nilai kedua menetapkan ketinggian. Jika hanya satu nilai diberikan, yang kedua ditetapkan kepada auto (automatik)
peratusan akan mengira peratusan kawasan kedudukan berbanding latar belakang. Nilai pertama menetapkan lebar, dan nilai kedua menetapkan ketinggian. Jika hanya satu nilai diberikan, nilai kedua ditetapkan kepada "auto"
penutup yang akan mengekalkan nisbah bidang imej dan menskalakan imej untuk menutup sepenuhnya kedudukan latar belakang Minimum saiz wilayah.
mengandungi akan mengekalkan nisbah bidang imej dan menskalakan imej kepada saiz maksimum yang sesuai dalam kawasan kedudukan latar belakang.
Atribut saiz latar belakang boleh menetapkan saiz imej melalui nilai panjang atau peratusan, atau menskalakan imej melalui penutup dan kandungan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 230px;
}
.box1{
background:url(img/3.jpg) no-repeat;
}
.box2{
background:url(img/3.jpg) no-repeat;
background-size: 200px 112px;
}
</style>
</head>
<body>
<p><strong>原始背景图片大小</strong></p>
<div class="box1"></div>
<p>本身这个图片宽度为400px，高度225px</p>
<br />
<p><strong>通过CSS修改背景图片大小，图片宽度为200px，高度112px</strong></p>
<div class="box2"></div>
</body>
</html>Rendering:
(Mempelajari perkongsian video: css Video tutorial)
Atas ialah kandungan terperinci Bagaimana untuk menukar saiz imej latar belakang dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!