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

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

青灯夜游

Libérer： 2020-12-18 11:10:56

original

21324 Les gens l'ont consulté

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.

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

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

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

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