Maison >interface Web >tutoriel CSS >Comment insérer une image d'arrière-plan dans le style CSS

Comment insérer une image d'arrière-plan dans le style CSS

青灯夜游original: 2020-12-18 11:10:5621369parcourir

En CSS, vous pouvez utiliser l'attribut background-image ou background pour insérer une image d'arrière-plan. Le format de syntaxe de base est "background-image/background:url('URL')". pour spécifier le chemin de l’image d’arrière-plan.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version HTML5+CSS3, cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

En CSS, vous pouvez utiliser l'attribut background-image ou background pour insérer une image d'arrière-plan.

attribut background-image

L'attribut background-image définit l'image d'arrière-plan d'un élément. L'arrière-plan d'un élément correspond à la taille totale de l'élément, y compris le remplissage et les bordures (mais pas les marges).

Syntaxe :

background-image:url(&#39;URL&#39;));

url('URL') URL de l'image

Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l’élément, et répétez verticalement et horizontalement.

Conseil : Veuillez définir une couleur d'arrière-plan disponible afin que si l'image d'arrière-plan n'est pas disponible, la bande de couleur d'arrière-plan puisse être utilisée à la place.

attribut d'arrière-plan

L'attribut d'arrière-plan est une propriété qui définit spécifiquement l'arrière-plan. Vous pouvez définir la couleur d'arrière-plan ou l'image d'arrière-plan.

L'attribut background est un attribut abrégé qui peut définir tous les attributs d'arrière-plan dans une seule instruction.

Les attributs qui peuvent être définis sont :

background-color : Spécifie la couleur d'arrière-plan à utiliser.
background-position : Spécifie la position de l'image d'arrière-plan.
background-size : Spécifie la taille de l'image d'arrière-plan.
background-repeat : Spécifie comment répéter l'image d'arrière-plan.
background-origin : Spécifie la zone de positionnement de l'image d'arrière-plan.
background-clip : Spécifie la zone de dessin de l'arrière-plan.
background-attachment : Spécifie si l'image d'arrière-plan est fixe ou défile avec le reste de la page.
background-image : Spécifie l'image d'arrière-plan à utiliser.

Exemple :

background:url(bgimg.gif) no-repeat 5px 5px;

Expliqué ci-dessous :

Comment insérer une image d'arrière-plan dans le style CSS

Exemple d'image d'arrière-plan :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片设置</title>
		<style>
			.demo1{
				width: 400px;
				height: 200px;
				background-color: #fff;
				background-image: url(bg.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			.demo2{
				width: 400px;
				height: 200px;
				background:#fff url(bg.jpg) no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="demo1"></div><br />
		<div class="demo2"></div>
	</body>
</html>

Comment insérer une image darrière-plan dans le style CSS

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la 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!

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：Comment définir la liste d'éléments CSSArticle suivant：Comment définir la liste d'éléments CSS

Articles Liés

Voir plus