Maison  >  Article  >  interface Web  >  Comment définir l'image d'arrière-plan en CSS3

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

王林
王林original
2021-05-17 14:08:133438parcourir

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>

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!

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