CSS multiples arrière-plans

Dans ce chapitre, vous apprendrez à ajouter plusieurs images de fond à un élément.

Vous apprendrez également les propriétés suivantes :

  • background-size
  • background-origin
  • background-clip

CSS multiples arrière-plans

CSS vous permet de background-image La propriété ajoute plusieurs images de fond à un élément.

Les images de fond différentes sont séparées par des virgules, et elles se superposent les unes aux autres, avec la première image la plus proche du spectateur.

L'exemple suivant comporte deux images de fond, la première image est une fleur (alignée avec le bas et la droite), la deuxième image est un fond en papier (alignée avec le coin supérieur gauche) :

实例

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Essayer par vous-même

Les images de fond multiples peuvent être utilisées via la propriété de fond séparée (comme mentionné précédemment) ou background les propriétés abrégées pour spécifier.

L'exemple suivant utilise background Propriétés abrégées (résultat identique à l'exemple précédent) :

实例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Essayer par vous-même

Taille des arrière-plans CSS

CSS background-size L'attribut permet de spécifier la taille de l'image de fond.

On peut spécifier la taille de l'image de fond en utilisant des longueurs, des pourcentages ou l'un des deux mots-clés suivants :contain ou coverLes deux autres valeurs possibles de

L'exemple suivant ajuste la taille de l'image de fond pour qu'elle soit beaucoup plus petite que l'image originale (en pixels) :

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Voici le code :

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Essayer par vous-même

background-size sont contain et coverLes deux autres valeurs possibles de

contain .

cover Les mots-clés réduisent l'image de fond pour qu'elle couvre complètement la zone de contenu (sa largeur et sa hauteur sont égales ou supérieures à la zone de contenu). Dans ce cas, certaines parties de l'image de fond peuvent ne pas être visibles dans la zone de positionnement de l'arrière-plan. Les mots-clés réduisent l'image de fond à la plus grande taille possible (mais sa largeur et sa hauteur doivent correspondre à la zone de contenu). Selon le rapport entre l'image de fond et la zone de positionnement de l'arrière-plan, certaines zones de l'arrière-plan peuvent ne pas être couvertes par l'image de fond.

下面的例子展示了 contain et cover L'utilisation :

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Essayer par vous-même

Définir la taille de plusieurs images de fond

Lors du traitement de multiples arrière-plans,background-size L'attribut peut également accepter plusieurs valeurs de définition de la taille du fond (liste séparée par des virgules).

L'exemple suivant spécifie trois images de fond, chaque image ayant une valeur différente de background-size :

实例

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Essayer par vous-même

全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

  • 用图像填充整个页面（无空白）
  • 根据需要缩放图像
  • 在页面上居中图像
  • 不引发滚动条

下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

实例

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Essayer par vous-même

Hero Image

您还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

实例

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Essayer par vous-même

Propriété background-origin CSS

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

  • border-box - 背景图片从边框的左上角开始
  • padding-box - 背景图像从内边距边缘的左上角开始（默认）
  • content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

实例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Essayer par vous-même

Propriété background-clip CSS

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

  • border-box - 背景绘制到边框的外部边缘（默认）
  • padding-box - 背景绘制到内边距的外边缘
  • content-box - 在内容框中绘制背景

下面的例子展示了 background-clip 属性：

实例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Essayer par vous-même

Propriétés avancées de fond CSS

Propriété Description
background Propriété abrégée pour définir toutes les propriétés de fond en une seule déclaration.
background-clip Définir la zone de dessin du fond.
background-image Spécifier une ou plusieurs images de fond pour un élément.
background-origin Définir la position de l'image de fond.
background-size Définir la taille de l'image de fond.