CSS背景

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

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

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

和速记财产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,它一直延伸到边框的外边缘。

其他值是

  • padding-box将背景扩展到填充边缘,没有边框
  • content-box将背景扩展到内容边缘,而无需填充
  • inherit运用父母的价值

将图片用作背景时,您需要使用background-position财产:leftrightcenter是X轴的所有有效值,并且topbottom对于Y轴:

div {
  background-position: top right;
}

如果图像小于背景,则需要使用background-repeat。应该是repeat-xrepeat-y或者repeat在所有轴上?最后一个是默认值。另一个值是no-repeat

background-origin使您可以选择将背景应用到的位置:使用以下命令对整个元素(包括填充)(默认值)进行应用padding-box,使用包括边框在内的整个元素border-box,不使用填充的元素content-box

background-attachment我们可以将背景附加到视口,以便滚动不会影响背景:

div {
  background-attachment: fixed;
}

默认情况下,值为scroll。还有另一个价值local。可视化他们行为的最好方法是这个Codepen

最后的背景属性是background-size。我们可以使用3个关键字:autocovercontainauto是默认值。

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手册


更多CSS教程: