Les CSS peuvent-ils charger des images ?-Questions et réponses frontales-php.cn

Les CSS peuvent-ils charger des images ?

青灯夜游

Libérer： 2022-09-16 18:28:15

original

2258 Les gens l'ont consulté

css peut charger des images. En CSS, vous pouvez utiliser les attributs background-image ou background pour charger des images ; les deux attributs peuvent être utilisés avec la fonction url() pour définir une image d'arrière-plan pour un élément, avec la syntaxe "background-image: url (path path) ;" ou "arrière-plan : url (chemin de l'image);".

Les CSS peuvent-ils charger des images ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut background-image ou background pour charger des images.

L'attribut background-image définit l'image d'arrière-plan de l'élément ; et background est un attribut simplifié qui peut définir tous les styles d'arrière-plan dans une seule instruction, y compris les images d'arrière-plan.

Syntaxe : la fonction

background-image:url(图片路径);
background:url(图片路径);

Copier après la connexion

url() accepte une URL à paramètre unique, qui enregistre l'URL au format chaîne.

Remarque :

L'image d'arrière-plan définie par l'attribut background-image ou background occupera toute la taille de l'élément, y compris le remplissage et les bordures, mais à l'exclusion des marges extérieures. Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.
L'attribut background-image ou background définit une image en arrière-plan de l'élément. En fonction de la valeur de la propriété background-repeat, l'image peut être carrelée à l'infini, carrelée le long d'un axe (axe x ou y), ou pas carrelée du tout.
L'image d'arrière-plan initiale (image originale) est placée en fonction de la valeur de la propriété background-position.

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.

Exemple CSS de chargement d'images

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 400px;
				height: 300px;
				border: 1px solid red;
			}

			.img1 {

				background-image: url(img/1.jpg);
				background-size: 200px;
				background-repeat: no-repeat;
			}
			.img2 {
			
				background-image: url(img/2.jpg);
				/* background-size: 200px; */
			}
		</style>
	</head>
	<body>
		<div class="img1"></div>
		<div class="img2"></div>
	</body>
</html>

Copier après la connexion

Les CSS peuvent-ils charger des images ?