Maison > Article > interface Web > Comment utiliser une image comme arrière-plan dans un document HTML ?

Comment utiliser une image comme arrière-plan dans un document HTML ?

青灯夜游original: 2020-10-26 15:50:3862002parcourir

En HTML, vous pouvez utiliser l'image comme arrière-plan en définissant le style d'arrière-plan CSS ou d'image d'arrière-plan pour la balise body. Le format de syntaxe est "background/background-image:url("chemin de l'image"). ;".

(Tutoriel recommandé : Tutoriel HTML)

Vous pouvez utiliser l'attribut CSS background ou background-image dans le document html dans L'image est définie comme arrière-plan. Vous pouvez définir tous les attributs d'arrière-plan dans une seule instruction. background-image spécifie une ou plusieurs images d'arrière-plan à utiliser.

Les attributs que background peut définir sont : background-color. , position d'arrière-plan, taille d'arrière-plan, répétition d'arrière-plan, origine d'arrière-plan, clip d'arrière-plan, pièce jointe d'arrière-plan et image d'arrière-plan.

Séparez chaque valeur par un espace, sans ordre particulier. Il est possible que seules certaines de ces valeurs, comme background : #FF0000 URL (smiley.gif) soient autorisées.

Exemple : Utiliser l'image comme arrière-plan

<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>

Rendu :

Comment utiliser une image comme arrière-plan dans un document HTML ?

Il s'agit d'une tuile de plusieurs images, si vous souhaitez qu'une image occupe tout l'écran, vous pouvez utiliser l'attribut background-repeat ou ajouter une valeur de non-répétition à l'attribut background.

<!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>

Rendu :

Comment utiliser une image comme arrière-plan dans un document HTML ?

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html position background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：En savoir plus sur les conventions de codage en HTMLArticle suivant：En savoir plus sur les conventions de codage en HTML

Articles Liés

Voir plus