ホームページ >ウェブフロントエンド >htmlチュートリアル >背景サイズの使い方の詳しい説明_html/css_WEB-ITnose
背景サイズの使い方の詳しい説明_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:522236ブラウズ
background-size 属性の使用法の詳細な説明:
この属性は、背景画像のサイズを制御するために使用されます。以下は、コード例を通じてこの属性の使用法を詳しく説明します。困っている友達に助けを届けましょう。
Background-size 属性には 2 つのパラメータがあります (cover と contains はここには含まれません)。パラメータ値は正確な数値形式またはパーセント形式にすることも、デフォルト値 auto にすることもできます。たとえば、次のようになります。ここでは、Background-size 属性のパラメーターについて簡単に説明します。
2 つのパラメーターが指定された場合、最初のパラメーターは背景画像の幅を指定するために使用され、2 番目のパラメーターは背景画像の高さを指定するために使用されます。
コード例は次のとおりです。
background-size:200px 100px;background-size:50% 50%;background-size:auto;
Background-size 属性には 2 つのパラメータがあり、最初のパラメータは背景画像の幅を 200 ピクセルとして指定し、2 番目のパラメータは背景画像の高さを 100 ピクセルとして指定します。 別のコード例を見てください:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; } .test{ background-image:url(mytest/demo/small.jpg); background-size:200px 100px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>
上記のコードでは、Background-size 属性でパラメータが指定されており、このパラメータは背景画像の幅を指定するために使用されます。 If 背景画像のサイズがコンテナを超える場合、トリミングされます。
表紙を紹介し、この属性の属性値を含めてみましょう。
1.cover 属性:属性値を cover に設定すると、背景画像がコンテナを完全に覆うように拡大縮小されますが、背景画像がコンテナを超える場合がありますが、余分な部分はトリミングされます。
カバーは英語でカバーするという意味でもあります。これを言うと、全員の記憶と理解が促進されます。
コード例は次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</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(mytest/demo/small.jpg); background-size:200px; background-repeat:no-repeat; } .second{ background-image:url(mytest/demo/small.jpg); background-size:600px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="first"></li> <li class="second"></li> </ul> </body> </html> 上記のコードでは、背景画像がコンテナを最小限に完全に覆うことができますが、背景画像のアスペクト比がコンテナと異なる場合、必然的にコンテナを超えて表示されます。コンテナを水平または垂直に配置すると、余分な部分が非表示になります。 一.contain 属性:
この属性値は背景画像を拡大または縮小できます。
cover 属性と同様に、画像は同じ比率で拡大または縮小できますが、cover はコンテナを最小限にカバーしますが、contain はコンテナを垂直または水平などの特定の方向にカバーする必要があるだけで、カバーすることができます。コンテナを最小限に抑えます。コード例は次のとおりです:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</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(mytest/demo/small.jpg); background-size:cover; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html> 上記のコードでは、背景画像は垂直方向で最初に充填コンテナ要素に到達できるため、水平方向での試みは諦められます。
元のアドレスは、background-size の使用方法の詳細な説明の章です。