背景画像のサイズを長さの値またはパーセンテージで表示して設定します。カバーや含めて画像を拡大縮小することもできます。
background-size 属性の使用法の詳細な説明:
Background-size 属性には 2 つのパラメーターがあります (cover と contains はここには含まれません) パラメーター値は、正確な数値形式またはパーセント形式のいずれかです。デフォルト値 auto にすることもできます。例:
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;
以下のペア Background-size 属性のパラメーターの簡単な説明:
パラメーターが 1 つだけの場合、この値は背景画像の幅を指定するために使用されます。このとき、背景画像の高さの値は次のとおりです。幅に比例して拡大縮小されます。
2 つのパラメーターが指定された場合、最初のパラメーターは背景画像の幅を指定するために使用され、2 番目のパラメーターは背景画像の高さを指定するために使用されます。
コード例は次のとおりです:
<!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>Background-size 属性は 2 つのパラメーターを受け取り、最初のパラメーターは背景画像の幅を 200 ピクセルとして指定し、2 番目のパラメーターは背景画像の高さを 100 ピクセルとして指定します。
別のコード例を見てください:
<!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> 上記のコードでは、Background-size 属性でパラメーターを指定し、このパラメーターを使用して背景画像の幅を指定します。背景画像の高さは、背景画像のサイズがコンテナを超える場合は切り取られます。
background-size 属性値が auto の場合、背景画像は元のサイズに従って表示されます。ここで説明する必要はありません。
表紙を紹介し、この属性の属性値を含めてみましょう。
1.cover 属性:
属性値を cover に設定すると、背景画像がコンテナを完全に覆うように比例して拡大縮小されます。背景画像はコンテナを超える場合がありますが、余分な部分は切り取られます。
カバーは英語でカバーするという意味でもあります。これを言うと、全員の記憶と理解が促進されます。
コード例は次のとおりです:
<!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> 上記のコードでは、背景画像とコンテナのアスペクト比が異なる場合、必然的にコンテナを水平方向に超えることになります。そうすると、余分な部分が隠れます。
一.contain 属性:
この属性値は背景画像を拡大または縮小できます。
cover 属性と同様に、画像は同じ比率で拡大または縮小できますが、cover はコンテナを最小限にカバーしますが、contain はコンテナを垂直または水平などの特定の方向にカバーする必要があるだけで、カバーすることができます。コンテナを最小限に抑えます。
コード例は次のとおりです:
<!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> 上記のコードでは、背景画像は垂直方向で最初に充填コンテナ要素に到達できるため、水平方向での試みは諦められます。
次のセクション