码农教程 - 一技在手,衣食无忧! tools

目录

CSS 背景

❮ 上一节 下一节 ❯

在本章中，您将学习如何向一个元素添加多个背景图片。

您还将了解以下属性：

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

CSS 背景

CSS 允许您通过以下方式为一个元素添加多个背景图片background-image属性。

不同的背景图片用逗号分隔，并且图片彼此堆叠，其中第一个图片最接近观看者。

以下示例有两个背景图片，第一个图片是花朵（与底部和右侧对齐），第二个图片是纸张背景（与左上角对齐）：

示例

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}
亲自试一试 »

可以使用单独的背景属性（如上所述）或background简写属性。

以下示例使用background简写属性（与上面的示例结果相同）：

示例

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
亲自试一试 »

CSS 背景大小

CSSbackground-size属性允许您指定背景图片的大小。

大小可以用长度、百分比或使用两个关键字之一来指定：包含或覆盖。

以下示例将背景图片的大小调整为比原始图片小得多（使用像素）：

洛雷姆·伊普苏姆·多洛尔

Lorem ipsum dolor sat amet，conectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。

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

这是代码：

示例

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

另外两个可能的值background-size是contain和cover。

这个contain关键字将背景图片缩放到尽可能大（但其宽度和高度都必须适合内容区域）。这样，根据背景图片与背景定位区域的比例，可能会有一些背景区域没有被背景图片覆盖。

这个cover关键字缩放背景图片，使内容区域完全被背景图片覆盖（其宽度和高度都等于或超过内容区域）。因此，背景图片的某些部分在背景定位区域中可能不可见。

下面的例子说明了使用contain和cover：

示例

#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;
}
亲自试一试 »

定义多个背景图片的尺寸

这个background-size当使用多个背景时，属性还接受背景大小的多个值（使用逗号分隔的列表）。

以下示例指定了三个背景图片，每个图片具有不同的背景大小值：

示例

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}
亲自试一试 »

全尺寸背景图片

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

要求如下：

  • 用图片填充整个页面（没有空白）
  • 根据需要缩放图片
  • 页面中心图片
  • 不要引起滚动条

以下示例展示了如何执行此操作；使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。然后使用背景大小属性调整其大小：

示例

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}
亲自试一试 »

英雄形象

您还可以在 <div> 上使用不同的背景属性来创建英雄图片（带有文本的大图片），并将其放置在您想要的位置。

示例

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

CSS background-origin 属性

CSSbackground-origin属性指定背景图片的位置。

该属性采用三个不同的值：

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

下面的例子说明了background-origin属性：

示例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
亲自试一试 »

CSS background-clip 属性

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

该属性采用三个不同的值：

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

下面的例子说明了background-clip属性：

示例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
亲自试一试 »

通过练习测试一下

练习:

将两个背景图片添加到 <body> 元素中。

img1.gif和img2.gif。

确保img2.gif显示在顶部img1.gif。

<style>
body {
  background-image: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

CSS 高级背景属性

Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)

❮ 上一节 下一节 ❯