検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLドキュメントの背景として画像を使用するにはどうすればよいですか?

HTMLドキュメントの背景として画像を使用するにはどうすればよいですか?

青灯夜游
青灯夜游オリジナル
2020-10-26 15:50:3862041ブラウズ

HTML では、body タグに CSS 背景または背景画像スタイルを設定することで、画像を背景として使用できます。構文形式は "background/background-image:url("画像パス") です。 ;"。

HTMLドキュメントの背景として画像を使用するにはどうすればよいですか?

(推奨チュートリアル: html チュートリアル)

css の背景または背景画像属性を使用できます。 HTML ドキュメントを画像に背景として設定します。background は、1 つのステートメントですべての背景プロパティを設定できます。background-image は、使用する 1 つ以上の背景画像を指定します。

background が設定できるプロパティは次のとおりです。 color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment、background-image。

各値をスペースで区切ります。順序は問いません。背景: #FF0000 URL (smiley.gif); など、これらの値の一部のみが許可される可能性があります。

例: 画像を背景として使用します

<html>
<head>
<style type="text/css">
body
{ 
background: url(bg.jpg) ; 
/*background-image: url(bg.jpg);*/
}
</style>
</head>

<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>

</html>

レンダリング:

HTMLドキュメントの背景として画像を使用するにはどうすればよいですか?

これは複数のタイルです。 Pictures の場合、画像を全画面に表示したい場合は、background-repeat 属性を使用するか、background 属性に no-repeat 値を追加します。 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {
				/*background: url(bg.jpg) no-repeat;*/
				background-image: url(bg.jpg);
				background-repeat:no-repeat;
			}
		</style>
	</head>

	<body>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
	</body>

</html>

レンダリング:

HTMLドキュメントの背景として画像を使用するにはどうすればよいですか?

プログラミング関連の知識の詳細については、プログラミング コースをご覧ください。 ！

以上がHTMLドキュメントの背景として画像を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html position background
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML のコーディング規約の詳細については、こちらをご覧ください。次の記事：HTML のコーディング規約の詳細については、こちらをご覧ください。

関連記事

続きを見る