Maison > Article > interface Web > Comment utiliser l'attribut background-image

Comment utiliser l'attribut background-image

青灯夜游original: 2019-02-18 11:48:3024619parcourir

L'attribut background-image est utilisé pour définir une ou plusieurs images d'arrière-plan de l'élément, séparées par des virgules (,).

Propriété CSS background-image

Fonction : propriété background-image Définit une image d'arrière-plan pour l'élément.

Syntaxe :

background-image:url(图片路径)

Description : L'image d'arrière-plan définie par l'attribut background-image occupera toute la taille de l'élément, y compris le rembourrage et les bordures du bord intérieur, mais pas les marges. 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.

Conseil : Veuillez définir une couleur d'arrière-plan disponible, de sorte que si l'image d'arrière-plan n'est pas disponible, vous puissiez utiliser la bande de couleur d'arrière-plan à la place.

Exemple d'utilisation de l'attribut CSS background-image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 

<style>
#example1 {
    background-color:#cccccc;
    background-image:url("https://img.php.cn/upload/article/000/000/024/5c6a290265dba776.gif"),url("https://img.php.cn/upload/article/000/000/024/5c6a2793a13ac244.gif");
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
<h1>Hello World!</h1>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
</div>

</body>
</html>

Rendu :

Comment utiliser lattribut background-image

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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 utiliser l'attribut d'arrière-planArticle suivant：Comment utiliser l'attribut d'arrière-plan

Comment utiliser l'attribut background-image

Articles Liés