CSS3 には、bachground-size 属性という非常に重要な属性があることがわかっています。その機能は、背景画像のサイズを定義することです。auto、pixel value、percentage、cover、contain の 5 つの値があります。今日は、bachground-size 属性の使用方法を説明します。デフォルト値の
background-size:auto は、要素を画像自体のサイズで埋め、要素のサイズに応じて独自の比率を調整し、画像を変形しません。
CSS3 の背景サイズ属性について
1.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>2. 背景画像自体のサイズ - 幅: 200px、高さ: 133px は次のとおりです:
ピクセル値など。 30px 50px として、それぞれ幅、高さを表します
CSS3 の背景サイズ属性について
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです！
関連書籍:
Css3 でのTransform 属性の使用に関するチュートリアル
以上がCSS3のbackground-sizeプロパティの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
