background-image

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

CSS 中的 background-image 属性将图形(例如 PNG、SVG、JPG、GIF、WEBP)或渐变应用于元素的背景。

您可以使用 CSS 包含两种类型的图像:普通图像和渐变。

图像

在背景上使用图像非常简单

body {
  background: url(sweettexture.jpg);
}

url() 值允许您提供任何图像的文件路径,它将显示为该元素的背景。

您还可以为 url() 设置数据 URI。 它看起来像这样

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

此技术减少了一个 HTTP 请求,这是一件好事。 但是,它也有一些缺点,因此在您开始替换所有图像之前,请确保您考虑了所有 数据 URI 的优缺点

您还可以使用 background-image精灵图像,这是另一种用于减少 HTTP 请求的实用方法。

渐变

使用背景时的另一个选择是告诉浏览器创建渐变。 这是一个超级简单的线性渐变示例

body {
  background: linear-gradient(black, white);
}

您也可以使用径向渐变

body {
  background: radial-gradient(circle, black, white);
}

从技术上讲,渐变只是另一种形式的背景图像。 不同之处在于浏览器为您制作图像。 这是一个关于如何制作和使用它们的 完整指南

上面的示例只使用了一个渐变,但您也可以将多个渐变叠加在一起。 使用这种技术,您可以创建一些 非常棒的图案

设置回退颜色

如果背景图像无法加载,或者您的渐变背景在不支持渐变的浏览器上查看,浏览器将查找背景颜色作为回退。 您可以像这样指定回退颜色

body {
  background: url(sweettexture.jpg) blue;
}

多个背景图像

您可以使用多个图像,或将图像和渐变混合使用作为您的背景。 多个背景图像现在得到了很好的支持(所有现代浏览器和 IE9+ 用于图形图像,IE10+ 用于渐变)。

当您使用多个背景图像时,请注意存在一个有点违反直觉的 堆叠顺序。 将应位于最前面的图像列在最前面,将应位于最后面的图像列在最后,如下所示

body {
  background: url(logo.png), url(background-pattern.png);
}

当您使用多个背景图像时,您通常需要为背景设置更多值以将所有内容放置在正确的位置。 如果您想使用 background 简写,您可以分别为每个图像设置值。 您的简写将看起来像这样(注意用逗号分隔第一个图像及其值与第二个图像及其值)

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

您设置的背景图像数量没有限制,您可以执行诸如动画背景图像之类的酷炫操作。 David Walsh 的博客 上有一个带有动画的多个背景图像的良好示例。

演示

浏览器支持

IEEdgeChromeFirefoxSafariOpera
全部全部全部全部全部全部
iOS SafariChrome AndroidFirefox AndroidAndroid 浏览器Opera Mobile
全部全部全部90+62+
来源:caniuse

背景图片渐变支持

IEEdgeChromeFirefoxSafariOpera
10+全部全部3.6+4+11.5+
iOS SafariChrome AndroidFirefox AndroidAndroid 浏览器Opera Mobile
全部全部全部90+62+
来源:caniuse

背景图片 SVG 支持

IEEdgeChromeFirefoxSafariOpera
9+全部8+4+5+全部
iOS SafariChrome AndroidFirefox AndroidAndroid 浏览器Opera Mobile
5+全部全部90+62+
来源:caniuse

更多信息