CSS flerska bakgrundar

I denna kapitel kommer du att lära dig hur man lägger till flera bakgrundsbilder till ett element.

Du kommer också att lära dig följande egenskaper:

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

CSS flerska bakgrundar

CSS tillåter dig att använda background-image Egenskapen lägga till flera bakgrundsbilder till ett element.

Olika bakgrundsbilder är åtskilda med komma, och bilderna staplas emellan, där den första bilden är närmast betraktaren.

Följande exempel har två bakgrundsbilder, det första bilderna är blommor (alltihop med botten och höger), det andra är papper bakgrund (alltihop med vänster och topp):

实例

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

Prova själv

Flerska bakgrundsbilder kan användas med en enskild bakgrundsegenskap (som nämnts tidigare) eller background kortformad egenskap för att specificera.

Följande exempel använder background Kortformad egenskap (resultatet är detsamma som i föregående exempel):

实例

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

Prova själv

CSS bakgrundens storlek

CSS background-size Egenskapen tillåter dig att specificera storleken på bakgrundsbilden.

Storleken på bakgrundsbilden kan specificeras med längd, procent eller med en av följande två nyckelord:innehålla eller cover.

Följande exempel justerar storleken på bakgrundsbilden till mycket mindre än den ursprungliga bilden (i pixlar):

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.

Detta är koden:

实例

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

Prova själv

background-size Andra två möjliga värden är innehålla och cover.

innehålla nyckelordet kommer att skalera bakgrundsbilden till så stor storlek som möjligt (men bredd och höjd måste passa innehållsområdet). Detta kan innebära att det finns några delar av bakgrunden som inte täcks av bakgrundsbilden beroende på förhållandet mellan bakgrundsbilden och bakgrundens positioneringsområde.

cover nyckelordet kommer att skalera bakgrundsbilden så att innehållsområdet är helt täckt av bakgrundsbilden (dess bredd och höjd är lika med eller större än innehållsområdet). Detta kan innebära att vissa delar av bakgrundsbilden inte är synliga i bakgrundens positioneringsområde.

下面的例子展示了 innehålla och cover Användning:

实例

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

Prova själv

Definiera storleken på flera bakgrundsbilder

När det gäller flera bakgrunder:background-size Egenskapen kan också acceptera flera inställningar för bakgrundens storlek (en lista av separerade värden med komma).

Följande exempel specificerar tre bakgrundsbilder, varje bild har en annan background-size-värde:

实例

#example1 {
  background: url(tree.png) vänster topp utan upprepning, url(flower.gif) höger botten utan upprepning,; 
  	url(paper.gif) vänster topp upprepning;
  background-size: 50px, 130px, auto;
}

Prova själv

全尺寸背景图像

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

具体要求如下：

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

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

实例

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

Prova själv

Hero Image

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

实例

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

Prova själv

CSS background-origin egenskap

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;
}

Prova själv

CSS background-clip egenskap

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

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

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

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

实例

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

Prova själv

CSS avancerade bakgrundsegenskaper

Egenskap Beskrivning
background En kortfattad egenskap för att sätta alla bakgrundsegenskaper i ett uttalande.
background-clip Definiera ritområdet för bakgrunden.
background-image Ange ett eller flera bakgrundsbilder för ett element.
background-origin Definiera placeringen av bakgrundsbilden.
background-size Definiera storleken på bakgrundsbilden.