CSS背景

了解如何使用CSS更改元素的背景

可以使用几个CSS属性来更改元素的背景：

和速记财产background，这可以缩短定义并将它们分组在一行中。

background-color接受颜色值，该颜色值可以是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%;
}

如果您指定2个值，则一个为宽度，第二个为高度：

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);
}

免费下载我的CSS手册