Tetapkan saiz imej latar belakang, dipaparkan sebagai nilai panjang atau peratusan Anda juga boleh menskalakan imej melalui penutup dan mengandungi.
Penjelasan terperinci tentang penggunaan atribut saiz latar belakang:
Atribut saiz latar belakang mempunyai dua parameter (penutup dan kandungan tidak disertakan di sini) , The nilai parameter boleh sama ada nilai berangka tepat, peratusan atau nilai lalai auto, contohnya:
saiz latar belakang:200px 100px;
saiz latar belakang:50% 50%;
saiz latar belakang:auto;
Parameter berikut untuk atribut saiz Latar Belakang Biar saya berikan pengenalan ringkas:
Jika terdapat hanya satu parameter, maka nilai ini digunakan untuk menentukan lebar imej latar belakang Pada masa ini, nilai ketinggian imej latar belakang diskalakan secara berkadar dengan lebar.
Jika dua parameter disediakan, parameter pertama digunakan untuk menentukan lebar imej latar belakang, dan parameter kedua digunakan untuk menentukan ketinggian imej latar belakang.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px 100px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Atribut saiz latar belakang mengambil dua parameter Parameter pertama menentukan lebar imej latar belakang sebagai 200px, dan parameter kedua menentukan ketinggian imej latar belakang. sebagai 100px.
Lihat contoh kod lain:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.first{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px;
background-repeat:no-repeat;
}
.second{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:600px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="first"></li>
<li class="second"></li>
</ul>
</body>
</html> Dalam kod di atas, atribut saiz latar belakang menentukan parameter, kemudian parameter ini digunakan untuk menentukan lebar imej latar belakang dan ketinggian latar belakang imej adalah berdasarkan nilai lebar, dsb. Penskalaan berkadar, jika saiz imej latar belakang melebihi bekas, ia akan dipangkas.
Jika nilai atribut saiz latar belakang adalah automatik, imej latar belakang akan dipaparkan mengikut saiz asalnya. Tidak perlu menunjukkannya di sini.
Yang berikut memperkenalkan penutup dan mengandungi nilai atribut atribut ini.
1. Atribut penutup:
Selepas menetapkan nilai atribut kepada penutup, skalakan imej latar belakang secara berkadaran untuk menutup sepenuhnya bekas, tetapi bahagian yang berlebihan akan menjadi potong.
Sampul juga bermaksud membuat liputan dalam bahasa Inggeris akan membantu ingatan dan pemahaman semua orang.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Dalam kod di atas, imej latar belakang boleh menutup sepenuhnya bekas ke tahap minimum Jika nisbah aspek imej latar belakang dan bekas berbeza, ia pasti akan muncul dalam arah mendatar atau menegak Jika ia melebihi bekas, lebihan akan disembunyikan.
1.mengandungi atribut:
Nilai atribut ini boleh membesarkan atau mengurangkan imej latar belakang.
Sama seperti atribut penutup, imej boleh dibesarkan atau dikecilkan dalam perkadaran yang sama, tetapi penutup menutupi bekas pada tahap minimum, manakala kandungan hanya memerlukan bekas ditutup dalam arah tertentu, seperti menegak atau mendatar, yang boleh meminimumkan liputan kontena.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:contain;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Dalam kod di atas, imej latar belakang diskalakan secara berkadar Memandangkan elemen bekas pengisian boleh dicapai terlebih dahulu dalam arah menegak, percubaan dihentikan dalam arah mendatar.
bahagian seterusnya