背景画像をCSSで完全に表示する方法

CSS では、「background-size」属性を使用して、背景画像を完全に表示できます。この属性は、背景画像のサイズを指定するために使用されます。追加する必要があるのは、「background-size:100」だけです。 % 100%;" を要素に追加します。スタイルは背景画像を完全に表示できます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css で背景画像を完全に表示する方法

div CSS を使用して Web ページを作成する場合、場合によっては、背景画像を表示する必要があることがあります。 div 内の背景画像全体. では、CSS 設定を使用するにはどうすればよいでしょうか?次の例では、div css を使用して背景画像の完全表示を制御する方法を説明します。

1. test.html という名前の新しい HTML ファイルを作成して、div CSS が背景画像の完全な表示を制御する方法を説明します。 div タグを使用してモジュールを作成し、背景画像を追加します。 div タグの class 属性を mydiv に設定します。これは主に、以下のこのクラスを通じて CSS スタイルを設定するために使用されます。 タグを記述すると、このタグ内にページの CSS スタイルが記述されます。

クラス名 mydiv を通じて div の CSS スタイルを設定し、width 属性を使用して div の幅を 300 ピクセルに設定し、高さ属性を使用して div の高さを 300 ピクセルに設定します。

2. css タグ内で、background-image 属性で div の背景画像を、images フォルダ配下の 1.jpg 画像に設定し、背景を使用します。・サイズ設定 背景画像の幅と高さの比率が100%、つまり背景画像全体が表示されます。

ブラウザで test.html ファイルを開いて効果を確認します。

概要:

1. test.html ファイルを作成します。

2. ファイル内に div モジュールを作成します。

3. css タグで、div の幅、高さ、背景画像を設定し、background-size 属性で背景の幅と高さを 100% に設定して、背景画像全体を表示します。

注意:

div の幅の比率が画像の幅と高さの比率と異なる場合、背景画像の設定がすべて表示されるため、変形が発生します。

(学習ビデオ共有: css ビデオ チュートリアル)

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