背景サイズの使い方の詳しい説明_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

背景サイズの使い方の詳しい説明_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

background-size 属性の使用法の詳細な説明:
この属性は、背景画像のサイズを制御するために使用されます。以下は、コード例を通じてこの属性の使用法を詳しく説明します。困っている友達に助けを届けましょう。
Background-size 属性には 2 つのパラメータがあります (cover と contains はここには含まれません)。パラメータ値は正確な数値形式またはパーセント形式にすることも、デフォルト値 auto にすることもできます。たとえば、次のようになります。ここでは、Background-size 属性のパラメーターについて簡単に説明します。

パラメーターが 1 つだけの場合、この値は背景画像の幅を指定するために使用されます。このとき、背景画像の高さの値は比例して拡大縮小されます。幅まで。

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 背景画像のサイズがコンテナを超える場合、トリミングされます。

background-size 属性値が auto の場合、背景画像は元のサイズに従って表示されます。ここで説明する必要はありません。

表紙を紹介し、この属性の属性値を含めてみましょう。

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 の使用方法の詳細な説明の章です。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。