CSSで背景画像を中央に配置するにはどうすればよいですか?背景画像を中央に配置する方法の紹介（コード例）-CSSチュートリアル-php.cn

CSSで背景画像を中央に配置するにはどうすればよいですか?背景画像を中央に配置する方法の紹介（コード例）

青灯夜游

リリース： 2018-10-19 15:04:43

オリジナル

51616 人が閲覧しました

フロントエンドページの開発では、画像を表示するにはimgタグで画像を表示する方法と、background属性を設定して背景画像を表示する方法があります。画像画像を中央に配置できることはわかっていますが、背景画像も中央に配置できるでしょうか?背景画像を中央に配置するにはどうすればよいですか?この記事ではCSSで背景画像を中央揃えにする方法を紹介します。困っている友人は参考にしていただければ幸いです。

まず、CSS を使用して背景画像をブラウザの中央に配置する方法を見てみましょう。

実際、CSS の background-position 属性を使用すると、背景画像の水平方向と垂直方向の中央揃えを実現できます。以下では、背景を配置する方法を簡単なコード例を使用して説明します。 Position 属性は、画像を中央に表示するように設定します。

最初に、background 属性を使用して背景画像を表示します:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        background-image:url(CSSで背景画像を中央に配置するにはどうすればよいですか?背景画像を中央に配置する方法の紹介（コード例）) ;
		        background-size:200px 160px ;
		        background-repeat:no-repeat ;
			}
		</style>
	</head>
	<body>
		<div class="demo">
		
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景画像を中央に配置するにはどうすればよいですか?背景画像を中央に配置する方法の紹介（コード例）

次に、background-position を見てみましょう。属性設定:

1. 背景位置は、ピクセルを使用して背景画像を中央に配置します (背景画像のサイズがわかります)

この例では、背景画像の右下隅が一致します。背景を中央に配置するには、背景画像の中心をデモボックスの中心と一致させる必要があります。背景画像を高さの半分、下に移動する必要があります。右の幅。したがって、次のコードを CSS に追加すると、背景画像

background-position:100px 70px ;  /*宽的一半，高的一半*/

ログイン後にコピー

Rendering:

CSSで背景画像を中央に配置するにはどうすればよいですか?背景画像を中央に配置する方法の紹介（コード例）

2 を背景に 50 を使用して中央に配置できます。 Position % 背景画像を中央に設定します。これは非常に便利です。

background-position:50% 50% ;

ログイン後にコピー

3. 背景位置 center を使用すると、背景画像を中央に配置できます。これは非常に便利です。 (2 番目の中心は省略可能)

background-position:center center;

ログイン後にコピー

background-position の上記 3 つの設定方法はすべて、背景画像の中心合わせを実現できます。background-position 属性の最初の値は、水平位置を設定します。、2 番目の A 値は垂直位置を設定し、状況に応じて使用する方法を決定できます。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、 CSS3 ビデオチュートリアル、Html5 ビデオチュートリアル、bootstrap ビデオチュートリアルをご覧ください。

CSS の配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

以上がCSSで背景画像を中央に配置するにはどうすればよいですか?背景画像を中央に配置する方法の紹介（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。