ホームページ > 記事 > バックエンド開発 > CSSの背景画像を100％引き伸ばして全画面表示にする方法

CSSの背景画像を100％引き伸ばして全画面表示にする方法

現在、CSS の使用は多くのユーザーにとって非常に重要です。この記事では、CSS の背景画像を 100% 全画面に拡大する方法について説明します。困っている友達はそれを参考にすることができます。

今日では、痕跡を残さずに画像を非常にうまく拡大できる CSS の使用も多くのユーザーにとって非常に重要です。では、CSSを使用する際、背景画像を100%に引き伸ばして全画面表示した場合はどうすればよいのでしょうか？具体的なコードは何ですか?

CSSの背景画像を使用して100％全画面表示に拡大するにはどうすればよいですか？この質問は単純に聞こえるかもしれません。でも、ごめんなさい。それは私たちが思っているほど単純ではありません。

たとえば、コンテナ（body、p、span）に背景を設定します。この背景の長さと幅は、CSS2.1 より前では変更できません。

したがって、実際の結果は繰り返し表示することしかできないため、属性repeat、repeat-x、repeat-y、およびno-repeatが表示されます。背景画像の表示を制御するために使用されます。したがって、背景画像には通常 2 種類あります:

1. 大きな写真であり、サイズは領域のサイズに正確に一致します

2. 非常に小さな棒グラフを繰り返すと、非常に規則的な大きな画像の背景が形成されます。

しかし、CSS3 の登場により、この状況は改善されました。背景サイズのプロパティは、以前の願いを実現します。

そして、このプロパティは、Firefox、Chrome、IE9 で使用できます。
具体的な使い方は以下の通りです:
背景画像サイズ(数値表現):

コードは次のとおりです:

#背景サイズ{

背景サイズ:200px 100px;

}

背景画像のサイズ (パーセンテージ):

コードは次のとおりです:

#background-size2{

background-size:30% 60%;

}

背景画像のサイズ (要素を埋めるように画像を比例的に拡大します。つまり、カバー値):

コードは次のとおりです:

#background-size3{

背景サイズ:カバー;

}

背景画像のサイズ (要素のサイズ、つまり含まれる値に合わせて画像を比例的に縮小します):

コードは次のとおりです:

#background-siz

e4{

背景サイズ:含む;

}

背景画像のサイズ (要素に画像独自のサイズ、つまり自動値を入力します):

コードは次のとおりです:

#background-size5{

背景サイズ:自動;

}

りー

関連記事