ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで背景画像のサイズを設定する方法

CSSで背景画像のサイズを設定する方法

王林
リリース: 2020-11-30 13:51:24
オリジナル
19443 人が閲覧しました

CSS で背景画像のサイズを設定する方法: [background-size:80px 60px;] など、background-size 属性を使用して設定できます。[background-size] 属性で指定できます。幅も高さも。

CSSで背景画像のサイズを設定する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(推奨チュートリアル: css ビデオ チュートリアル )

CSS で背景画像のサイズを設定する方法:

属性の概要 :

background-size 属性は、背景画像のサイズを指定します。

構文:

background-size: length|percentage|cover|contain;
ログイン後にコピー

属性値:

  • length 背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定され、2 番目の値が auto に設定されている場合、

  • percentage は背景の配置領域に対する相対的なパーセンテージを計算します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定された場合、2 番目の値は「自動」に設定されます。

  • #cover これにより、画像のアスペクト比が維持され、背景の位置を完全にカバーするように画像が拡大縮小されます。地域のサイズ。

  • contain これにより、画像のアスペクト比が維持され、背景配置領域内に収まる最大サイズに画像が拡大縮小されます。

  • #例:

#背景画像のサイズを制御する

div
{
    background:url(img_flwr.gif);    
    background-size:80px 60px;    
    background-repeat:no-repeat;
}
ログイン後にコピー
関連する推奨事項:

CSS チュートリアル

以上がCSSで背景画像のサイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート