Arrière-plan CSS3
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. section suivante
