Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir l'image d'arrière-plan en CSS3

王林
Libérer: 2023-01-06 11:13:30
original
3447 Les gens l'ont consulté

La façon de définir l'image d'arrière-plan en CSS3 est d'ajouter l'attribut [background-image: url(css.jpg)]. L'attribut background-image est utilisé pour définir l'image d'arrière-plan d'un élément et renseigner l'adresse URL de l'image dans l'URL.

Comment définir l'image d'arrière-plan en CSS3

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Si nous voulons ajouter une image d'arrière-plan, nous pouvons sélectionner l'attribut background-image, qui peut introduire une image locale comme arrière-plan.

L'attribut background-image définit l'image d'arrière-plan d'un élément.

Valeur de l'attribut :

  • url('URL') URL de l'image

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				background-image: url(css.jpg);/* 引入图片 */
				background-size: 100px 100px;/* 设置图片的大小 */
background-repeat: no-repeat;/* 如果图片比较小,框比他大的时候,设置的显示方式,repeat-x沿x轴显示,repeat-y沿y轴显示 */
background-position: 50% 50%;/* 设置图片的位置,left top左上,center center居中..... */
			}
		</style>
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
</html>
Copier après la connexion

Tutoriels vidéo associés : Tutoriel vidéo CSS

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal