CSSを使用して背景画像を伸縮させて繰り返し表示を避ける方法

この記事では、CSS を使用して背景画像を引き延ばして塗りつぶす方法を主に紹介します。これは、必要な友人に参照できるようにするためのものです。 #ただしcss3が登場 今後、この重複表示状況は改善される予定です。背景画像を引き伸ばして塗りつぶすという以前の希望を実現するのが、background-size 属性です。興味のある方はぜひ参考にしてください。 背景画像を伸ばしたり埋めたりする方法、この質問は簡単そうに思えます。でも、ごめんなさい。それは私たちが思っているほど単純ではありません。

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

実際の結果は繰り返しのみ表示できるため、属性repeat、repeat-x、repeat-y、およびno-repeatが表示されます。背景画像の表示を制御するために使用されます。
したがって、背景画像には 2 つのタイプがあります
: 1. 領域のサイズと正確に一致する全体的な大きな画像
2.これを繰り返すと、非常に規則的な大きな絵の背景が形成されます。

しかし、CSS3 の登場後、この状況は改善されました。背景サイズのプロパティは、以前の願いを実現します。
そして、このプロパティは Firefox、Chrome、IE9 で使用できます。


具体的な使用方法は以下のとおりです。
背景画像サイズ(数値表示):

#background-size{ 
background-size:200px 100px; 
}

背景画像サイズ(パーセント表示):

#background-size2{ 
background-size:30% 60%; 
}

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

#background-size3{ 
background-size:cover; 
}

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

#background-size4{ 
background-size:contain; 
}

背景画像のサイズ (要素を画像自体のサイズ、つまり自動値で埋めます):

#background-size5{ 
background-size:auto; 
}

上記がこの記事の全内容です、皆さんの学習に役立つことを願っています、より多くの関連コンテンツについては PHP に注目してください 中国語のウェブサイト!

関連する推奨事項:

CSS の複数行テキストがオーバーフローしたときに表示される省略記号について

大なり記号の使用についてCSS スタイルと Css

の継承メソッドの処理

以上がCSSを使用して背景画像を伸縮させて繰り返し表示を避ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。