background-image

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: radial-gradient(circle, black, white);
}

从技术上将，渐变只是背景图片的另一种形式。区别在于浏览器会为你制作图片。以下是如何书写它们：CSS3渐变语法

上面的示例仅仅是一个渐变，但你也可以叠加多个渐变。你使用这种技术可以创建一些非常棒的模式。

设置回退颜色

如果背景图片加载失败，或者在不支持渐变的浏览器上查看渐变背景，浏览器将查找一个背景颜色座位回退。你可以像这样指定回退颜色：

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的博客上有一个很好的带动画背景图片的例子。

演示

HTML代码

  <h2>Image Background</h2>
  <div id="imageonly">
    <!-- 图片不易察觉-->
  </div>

  <h2>Gradient Background: Linear</h2>
  <div id="linear-gradient">
  </div>

  <h2>Gradient Background: Radial</h2>
  <div id="radial-gradient">
  </div>

  <h2>Multiple Backgound Images</h2>
  <p>Two images: CodePen logo & off-white pattern.</p>
  <div id="multiimage">
  </div>

　　

CSS代码

    /* 图片背景 */
    #imageonly {
      background: url(https://img2018.cnblogs.com/blog/1378575/201908/1378575-20190830141838937-2076740451.png);
    }

    /* 线性渐变背景 */
    #linear-gradient {
      background: linear-gradient(black, white);
    }

    /* 径向渐变背景 */
    #radial-gradient {
      background: radial-gradient(circle, black, white);
    }

    /*多背景图片*/

    #multiimage {
      background:
        url(https://img2018.cnblogs.com/blog/1378575/201908/1378575-20190830141855018-1747049510.png
) bottom center no-repeat,
        url(https://img2018.cnblogs.com/blog/1378575/201908/1378575-20190830141838937-2076740451.png) repeat;
    }

    /* 外围元素样式, 与背景无关 */
    body {
      font-family: sans-serif;
    }

    div {
       300px;
      height: 300px;
      margin-bottom: 1.5em;
    }　

图片背景

渐变背景：线性渐变

 

渐变背景：径向渐变

 

多背景图片