ホームページ >ウェブフロントエンド >フロントエンドQ&A >html/cssで背景画像を中央揃えに設定する方法

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

青灯夜游
青灯夜游オリジナル
2021-09-09 18:09:1218194ブラウズ

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

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

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

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

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

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

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

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

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

html/cssで背景画像を中央揃えに設定する方法HTMLコードを保存してブラウザで開くと、左上にブラウザの背景画像が表示されていることがわかります。コーナー。

html/cssで背景画像を中央揃えに設定する方法HTML コード ページに戻り、スタイル

background-position: center

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

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

html/cssで背景画像を中央揃えに設定する方法 推奨チュートリアル: 「

html ビデオ チュートリアル

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。