ホームページ > 記事 > ウェブフロントエンド > CSS3のbackground-sizeプロパティの詳細な紹介

CSS3のbackground-sizeプロパティの詳細な紹介

php中世界最好的语言オリジナル: 2017-11-30 16:34:492653ブラウズ

CSS3 には、bachground-size 属性という非常に重要な属性があることがわかっています。その機能は、背景画像のサイズを定義することです。auto、pixel value、percentage、cover、contain の 5 つの値があります。今日は、bachground-size 属性の使用方法を説明します。デフォルト値の

background-size:auto は、要素を画像自体のサイズで埋め、要素のサイズに応じて独自の比率を調整し、画像を変形しません。

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;
}
</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 に関する他の関連記事に注目してください。中国語のサイトです！