在CSS中,你可以做很多来设计你内容背后的背景。我们已经看了一些简单的用法,比如基本的背景颜色和图像。在本文中,我们将讲述整个故事,并查看一些高级的特性,比如多个背景图像和颜色梯度。

预备知识: HTML基础 (学习 Introduction to HTML),以及明白CSS是如何工作的(学习 Introduction to CSS.)
目标: 要详细了解样式元素的背景。

什么是背景?

元素的背景是指,在元素内容、内边距和边框下层的区域。默认情况下就是这样——在新的浏览器中,你可以使用 background-clip属性改变背景所占用的区域(更多细节见 CSS box model article background-clip coverage)。

背景并不在外边距下层——外边距不是元素区域的一部分,而是元素外面的区域。

还有很多其他的属性可以用来操作元素的背景,其中一些已经在我们的课程中已经见过很多次了:

注意:大多数的这些功能都有很好的浏览器支持,除了最后两个,支持的功能比较有限(Internet Explorer 9+,Safari 7+,Android 4.4+)和背景渐变(Internet Explorer 9+)。

在本文的其余部分中,我们将详细介绍如何使用这些特性。

基本内容:color, image, position, repeat

让我们来探索一个简单的例子,展示四个最基本的属性是如何工作的,您将在处理背景时使用这些属性。

背景颜色

你会经常使用 background-color属性:

  • 首先,大多数元素的默认背景颜色不是 white (这可能如你所料) 而是transparent——因此,如果您将一个元素的背景颜色设置为一些有趣的东西,但是希望它的子元素是白色的,那么您就必须明确地设置它。
  • 此外,设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持,而背景梯度等更奇异的特性只在较新的浏览器中得到支持,加上背景图像可能由于某种原因无法加载。因此,设置基本的背景颜色和指定这些特性是一个好主意,因此无论如何,元素的内容都是可读的。

让我们从构建一个示例开始。我们从一些简单的HTML开始

<p>Exciting box!</p>

我们给它一个背景色

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
}

其结果如下:

背景图像

 background-image 属性指定了在元素背景中显示的背景图像。该属性最简单的用法是使用 url() 函数——它以一个参数的路径作为参数——获取一个静态图像文件来插入。让我们为上面的例子添加一个背景图像:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
}

结果如下:

在默认情况下,图像在水平和垂直方向上都是重复的,这看起来不太好。我们可以使用background-repeat来修复这个问题,我们将在下一节中对此进行讨论。

注意:HTML 图像支持的任何图像格式都在CSS背景图像中支持,包括SVG。

需要记住的一件重要的事情是,由于背景图像是使用CSS设置的,并且出现在内容的背景中,它们将会在屏幕阅读器之类的辅助技术中不可见。它们不是内容图片,只是为了装饰,如果你想在你的页面上包含一个图片,这是内容的一部分,那么你应该用<img>元素来做。

背景重复

background-repeat 允许您指定背景图像是如何重复的。默认值是repeat,正如您在上面所看到的,它使图像一直重复,直到整个元素的背景被填充。在这种情况下,这不是我们想要的(虽然可能在某些情况下是,例如,repeating-background.html)。其他常见的和广泛支持的值是:

  • no-repeat: 图像将不会重复:它只会显示一次。
  • repeat-x: 图像将在整个背景中水平地重复。
  • repeat-y: 图像会在背景下垂直地重复。

让我们解决我们的例子:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
}

结果如下:

这当然看起来更好,但是图像的定位是关闭的,它现在重叠了文本。我们需要把它放在一个更好的地方。

背景位置:

background-position 允许我们在背景中任意位置放置背景图像。通常,该属性将使用两个通过空格分隔的值,该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形,x坐标从左到右,y坐标从上到下。

该属性可以接受许多不同的值类型,最常用的是:

  • 像px这样的绝对值——比如 background-position: 200px 25px.
  • 像rems 这样的相对值——比如 background-position: 20rem 2.5rem.
  • 百分比 ——比如 background-position: 90% 25%.
  • 关键字——比如 background-position: right center. 这两个值是直观的,可以分别取值比如 leftcenter, right和 topcenter, bottom

您应该注意,您可以混合并匹配这些值,比如 background-position: 99% center。还要注意,如果您只指定一个值,那么该值将被假定为水平值,而垂直值将默认为center。 

让我们来修正我们的例子:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
  background-position: 99% center;
}

结果如下:

背景图像:渐变

 background-image还有另一组可用的值——颜色渐变,渐变就是在背景中平滑的颜色过渡。动态生成的渐变是在不久之前引入的,这是因为在web设计中使用渐变是非常受欢迎的,但是使用背景图像来实现渐变是相当不灵活的。目前有两种类型的渐变——线性渐变(从一条直线到另一条直线)和径向渐变(从一个点发散出来)。

在本文中,我们只关注第一种类型。第二种方法比较复杂,也不太常用。您可以在本文末尾的链接中找到更多关于两者的信息。

线性渐变是通过linear-gradient()函数传入的,它是一个background-image属性的值。函数至少需要用逗号分隔的三个参数——背景中渐变的方向,开始的颜色和结尾的颜色。例如:

background-image: linear-gradient(to bottom, orange, yellow);

这个渐变将从上到下,从顶部的橙色开始,然后平稳过渡到底部的黄色。可以使用关键字来指定方向 (to bottomto right, to bottom right等), 或程度值 (0deg相当于 to top90deg 相当于 to right,直到 360deg,它再次相当于 to top )。

你也可以在颜色定义的渐变中指定其他的点——这些被称为color stops,浏览器会计算出每一组color stops之间的颜色渐变。比如:

background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);

这个渐变会从上到下运行,从黄色开始,向下渐变到橙色的40%,然后再回到黄色,达到100%。您可以指定任意颜色的站点,您也可以使用其他的单元来指定这些color stops的位置,例如rempx等。

让我们为我们的例子添加一个线性渐变:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

结果如下:

注意,您还可以使用repeating-linear-gradient()函数来设置一个重复的线性渐变。它的工作方式完全相同,只不过你设置的模式会不断重复,直到后台的边缘。例如:

background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

这将会产生一个渐变,从黄色到橙色,再沿着渐变的每50个像素再回来。

背景附件

另一个可供选择的选项是指定当内容滚动时它们是如何滚动的。这是使用background-attachment属性来控制的,该属性可以使用以下值:

  • scroll: 这将把背景修改为页面视图,因此它将在页面滚动时滚动。注意,我们说的是视图,而不是元素——如果你滚动实际的背景设置的元素,而不是页面,背景不会滚动。
  • fixed: 这可以在页面的位置上固定背景,所以当页面滚动时,它不会滚动,不管你是滚动页面还是背景设置的元素,它都会保持在相同的位置。
  • local:这个值后来被添加了(它只在Internet Explorer 9+中得到支持,而其他的则在IE4+中得到支持),因为scroll值相当混乱,并且在许多情况下并没有真正做您想要的事情。  local 值将背景设置为它所设置的元素的背景,因此当您滚动元素时,背景会随之滚动。

 background-attachment 只有当有内容要滚动时,属性才会有效果,所以我们做了一个演示来演示这三个值之间的区别——你可以看 background-attachment.html(也可以在这里看源码)。

背景速记

可以通过使用background属性来声明上面讨论的所有属性值(以及其他一些更新的浏览器)。要做到这一点,你要使用和你在单个属性中所做的相同的值,但是你把它们都放在一个由空格分隔的行上,就像这样:

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

任何在简写中没有指定的属性都将被指定为默认值。您可以查看background r参考页面,以了解这些默认值是什么,以及其他属性可以包含在background速记中。

让我们回到我们激动人心的框示例,用速记替换现有的属性。我们可以替换所有这些属性:

background-color: yellow;
background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-repeat: no-repeat;
background-position: 99% center;

用这个:

background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;

最后的代码看起来是这样的:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

结果如下:

多个背景

最近(由于Internet Explorer 9),我们已经具备了将多个背景连接到单个元素的能力。这是一件好事,因为多重背景非常有用。用逗号分隔不同的背景定义:

background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;              

这些背景都是堆叠在一起的,第一个出现在顶部,第二个在下面,第三个,等等。这可能不是你所期待的,所以要小心。还要注意的是,我们已经将后退背景颜色放入一个单独的属性声明中,因为尝试将其包含在多个背景中似乎会破坏一些东西。

你也可以将多个值放入到普通写法的 background-*属性中,比如:

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

尽管使用背景shorthand 可能更好——它不仅可以更快地编写,而且更容易查看哪些背景属性适用于哪个背景。

以前有多个背景时,web开发人员必须在他们的框中放置多个<div>元素,然后对每个元素应用单独的背景图像:

<div class="background1">
  <div class="background2">
    <div class="background3">
      <p>My content</p>
    </div>
  </div>
</div>

这是有效的,但是它导致了非常混乱的难以阅读的标记。如果您需要支持旧版本的Internet Explorer,您可能仍然需要这样做。

让我们把多个背景放在我们激动人心的框上——我们想要看到渐变和火球,两者同时出现:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

结果如下:

Note: 你可以 在Github上看到完整的示例 (也可以看源码)。

背景尺寸

正如我们之前提到的,有一个可用的属性——background-size ——它允许你动态地改变背景图像的大小,使它更适合你的设计。这在很多方面都很有用,例如自动纠正没有正确上传的图标的大小。请记住,这并不支持Internet Explorer版本低于9的版本,所以如果您需要支持旧的浏览器,那么您就不能依赖它。对于每个背景图像,您需要包含两个背景大小值,一个用于水平维度,另一个用于垂直方向:

background-image: url(myimage.png);
background-size: 16px 16px;

你可以使用你期望的所有长度单位来指定你想要的值——px,百分比, rem等。

你可以看到background-sizeIncluding icons on links中使用的一个很好的例子。

自主学习: 玩转背景

这个自主学习阶段也没有正确的答案,我们想让你在你继续之前玩一些背景和玩一些有趣的游戏。你可以:

  • 设置不同的背景颜色。
  • 包含一个不同的背景图像,找到一个在url()函数中使用的图像的绝对路径。
  • 应用背景渐变。
  • 应用多个背景。
  • 包括一个background-size的属性来改变你的背景图片的大小。

如果你是作为一个班级或学习小组的一员,你的老师或导师也可能会为你完成一些额外的任务。

如果犯了错误,你随时可以使用 Reset  按钮来重置它。

总结

这篇文章应该告诉你你需要了解的关于样式元素背景的知识。希望你也能在这个过程中找到乐趣!在下一篇文章中,我们将讨论边框问题,并研究如何对其进行样式化。

另见

文档标签和贡献者

 此页面的贡献者: ddtyjmyjm, Froggy
 最后编辑者: ddtyjmyjm,