html/cssで背景画像を中央揃えに設定する方法

html/css では、background-position 属性を使用して背景画像を中央に配置することができます。背景画像が配置される要素に「background-position: center;」スタイルを追加するだけです。が設定されている場合、背景画像を中央に配置することができます。

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

html/css で背景画像を中央に設定する手順

フロントエンド開発ツールを開き、新しい HTML コード ページを作成します

HTMLコードページに背景色を設定するdivタグを作成し、class = "bg-img"

#を追加します。 ## このタグに ##背景画像を設定します。 style タグを作成し、タグ内のクラス bg-img の背景画像、非繰り返し画像、幅、および高さのスタイルを設定します。スタイルコード:

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

HTMLコードを保存してブラウザで開くと、左上にブラウザの背景画像が表示されていることがわかります。コーナー。

HTML コード ページに戻り、スタイル

background-position: center

を bg-img クラスに追加します。

HTML コードを保存してブラウザを更新すると、ブラウザ上の背景画像が自動的に中央に配置されたことがわかります。

推奨チュートリアル: 「

html ビデオ チュートリアル

」、「CSS ビデオ チュートリアル 」

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