?? ??
?? ??? ???? ???? ?? ???? ??? ?????. ?? ? ??? ?? ??? ??? ??? ?? ????.
?? ?? ?? ???? ?? ??? ??:
?? ?? ???? ? ?? ????? ????(cover ? contain? ??? ???? ??) , ???? ?? ??? ?? ?, ??? ?? ???? auto? ? ????. ?:
background-size:200px 100px;
?? ??:50% 50%;
?? ??:??;
?? ?? ??? ?? ?? ???? ??? ?????:
????? ??? ?? ?? ? ?? ?? ???? ??? ???? ? ?????. ?? ?? ???? ?? ?? ??? ???? ?????.
? ?? ????? ???? ?? ? ?? ????? ?? ???? ??? ???? ? ???? ? ?? ????? ?? ???? ??? ???? ? ?????.
?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>Background-size ??? ? ?? ????? ?????. ? ?? ????? ?? ???? ??? 200px? ????, ? ?? ????? ?? ???? ??? ?????. 100px?.
?? ?? ?? ?????:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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> ? ???? Background-size ??? ????? ????, ? ????? ?? ???? ??? ??? ??? ???? ? ?????. ???? ?? ? ?? ???? ???. ?? ??, ?? ???? ??? ????? ???? ????.
Background-size ?? ?? auto?? ?? ???? ?? ??? ?? ?????. ???? ??? ??? ????.
??? ? ??? ?? ? ?? ?? ?? ?????.
1. ?? ??:
?? ?? ??? ??? ? ?? ???? ????? ??? ?? ? ??? ??? ?????. ???.
??? ??? ???? ???? ???. ??? ??? ??? ??? ??? ??? ???.
?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>? ???? ?? ???? ????? ????? ??? ?? ? ????. ?? ???? ????? ?? ?? ??? ?? ???? ????? ?? ?? ?? ???? ?????. ????? ???? ??? ??? ?????.
1.contain ??:
? ?? ?? ?? ???? ????? ??? ? ????.
Cover ??? ???? ???? ?? ??? ????? ??? ? ???, Cover? ??? ????? ?? ??, contain? ??? ??, ?? ? ?? ????? ??? ???. ???? ?? ??? ???? ? ????.
?? ?? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>? ????? ?? ???? ??? ????? ???????. ?? ???? ?? ??? ???? ??? ??? ? ?? ?????. ?? ??.
