CSS背景的实例教程一个元素的背景可以通过几个CSS属性来改变。 background-color background

一个元素的背景可以通过几个CSS属性来改变。

和速记属性background ，它允许缩短定义并将它们分组在一行中。

background-color 接受一个颜色值，它可以是颜色关键字之一，也可以是或值。rgb hsl

p {
  background-color: yellow;
}

div {
  background-color: #333;
}

你可以通过指定图像位置的URL，使用图像作为元素的背景，而不是使用一种颜色。

div {
  background-image: url(image.png);
}

background-clip 可以让你决定背景图像所使用的区域，或颜色。默认值是，它一直延伸到边界的外缘。border-box

其他值是

当使用图像作为背景时，你要使用background-position 属性来设置图像放置的位置。left,right,center 都是X轴的有效值，top,bottom 为Y轴。

div {
  background-position: top right;
}

如果图像比背景小，你需要用background-repeat 来设置行为。在所有的轴上应该是repeat-x,repeat-y 还是repeat ？最后这个是默认值。另一个值是no-repeat 。

background-origin 让你选择背景应该应用在哪里：使用，应用在包括填充物的整个元素上（默认），使用，应用在包括边框的整个元素上，使用，应用在没有填充物的元素上。padding-box border-box content-box

使用background-attachment ，我们可以将背景附加到视口上，这样滚动就不会影响背景。

div {
  background-attachment: fixed;
}

默认情况下，该值为scroll 。还有一个值，local 。视觉化它们行为的最好方法是这个Codepen。

最后一个背景属性是background-size 。我们可以使用3个关键词。auto,cover 和contain 。auto 是默认的。

cover 展开图像，直到整个元素都被背景覆盖。

contain 当一个维度（x或y）覆盖了整个图像的最小边缘，所以它完全包含在元素中时，停止扩展背景图像。

你也可以指定一个长度值，如果是这样的话，它就会设置背景图像的宽度（而高度则自动定义）。

div {
  background-size: 100%;
}

如果你指定两个值，一个是宽度，另一个是高度。

div {
  background-size: 800px 600px;
}

速记属性background ，可以缩短定义并将其分组在一行中。

这是一个例子。

div {
  background: url(bg.png) top left no-repeat;
}

如果你使用一个图像，而该图像无法加载，你可以设置一个后备颜色。

div {
  background: url(image.png) yellow;
}

你也可以设置一个梯度作为背景。

div {
  background: linear-gradient(#fff, #333);
}