Arrière-plan CSS3

CSS3 contient plusieurs nouvelles propriétés d'arrière-plan pour offrir un meilleur contrôle sur les éléments d'arrière-plan.

Dans ce chapitre, vous découvrirez les propriétés d'arrière-plan suivantes :

background-imagebackground-sizebackground-originbackground-clip

Vous apprendrez également à utiliser plusieurs images d'arrière-plan.

Propriété CSS3 background-image

En CSS3, vous pouvez ajouter une image d'arrière-plan via la propriété background-image.

Les différentes images d'arrière-plan et les images sont séparées par des virgules, et celle affichée en haut de toutes les images est la première.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    background-image: url(../style/images/img_flwr.gif), url(../style/images/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

Vous pouvez définir plusieurs attributs différents pour différentes images

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    background: url(../style/images/img_flwr.gif) right bottom no-repeat, url(../style/images/paper.gif) left top repeat;
    padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

Attribut CSS3 background-size

background-size spécifie la taille de l'image d'arrière-plan. Avant CSS3, la taille de l’image d’arrière-plan était déterminée par la taille réelle de l’image.

Les images d'arrière-plan peuvent être spécifiées en CSS3, ce qui nous permet de re-spécifier la taille de l'image d'arrière-plan dans différents environnements. Vous pouvez spécifier la taille en pixels ou en pourcentage.

La taille que vous spécifiez est un pourcentage de la largeur et de la hauteur de l'élément parent.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
body
{
background:url(../style/images/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg"  alt="Flowers" width="224" height="162"></p>
</body>
</html>

L'attribut background-Origin de CSS3

L'attribut background-Origin spécifie la zone d'emplacement de l'image d'arrière-plan.

Les images d'arrière-plan peuvent être placées dans les zones de la zone de contenu, de la zone de remplissage et de la zone de bordure.

CSS3 Plusieurs images d'arrière-plan

CSS3 vous permet d'ajouter des images d'arrière-plan aux éléments. Ajoutez plusieurs images d'arrière-plan.

Propriété CSS3 background-clip

La propriété background-clip background clipping en CSS3 commence à dessiner à partir de la position spécifiée.

Nouveaux attributs d'arrière-plan

Ordre CSS

background-clip spécifie la zone de dessin de l'arrière-plan. 3
Background-Origin spécifie la zone de positionnement de l'image d'arrière-plan. 3
Background-siZe spécifie la taille de l'image d'arrière-plan.

Formation continue

||

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background:url(../style/images/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </p> <p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg" alt="Flowers" width="224" height="162"></p> </body> </html>

soumettre Réinitialiser le code
Opération automatique

Arrière-plan CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]