关于background属性

发表于 分类于

前言

background属性实际上和font、animation、transition等属性一样，是一个缩写属性；实际上是由多个相关的属性组成的。

平时我们可能用的多就是填个背景色或者背景图地址上去，偶尔再调个背景图适应，也就没怎么关注过了。

不过把所有的background-*属性了解一下，会帮助我们更加的理解背景的本质，关键时候就不怕各种微调了。

background相关属性

background相关的属性有：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size， background-attachment；

其中background-image、background-attachment、background-origin、background-position、background-repeat和background-size这几个属性只适用于背景图模式（即对背景色不起作用）；

background-clip

这个属性是用来指定背景的显示区域。其可选值是<box>类型的，即盒模型。

  • content-box

  • padding-box

  • border-box；默认值。

  • text：仅适用于background-clip，目前（2020-2-3）兼容性不大好；大部分浏览器需要带前缀。

    20200206111609

    该属性使得背景只会在当前元素的文字区域显示，当然要使得文字背景能够显示，首先使得文字的颜色为透明才行：

    1
    2
    3
    4
    5
    .demo {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

background-color

很明显，这个属性是用来设置纯背景色的；可选值为<color>类型，默认值为transparent。

注意：渐变色不属于<color>类型的！是<image>类型的！！！

background-image

很明显，这属性则是用来设置背景图片的；可选值为<image>类型，默认值为none。此外，支持多个背景图同时设置，可用英文逗号,来分隔：

1
2
3
.demo {
    background-image: url("xxx.jpg"), url("sdf.png"), ...;
}

目前，<image>类型的数据来源主要有：

  • url()函数引用的图片
  • 渐变色
  • element()函数引用的DOM对象；该函数目前还未被广泛支持。

background-attachment

这个属性则是用来指定背景区域在滚动时的跟随方式；可选值有：

  • fixed：滚动时，背景区域始终相对于视口不动；
  • local：滚动时，背景区域始终跟随元素内容一起滚动；
  • scroll：默认值；若在元素区域内发生滚动（元素自身出现滚动条），则背景区域始终相对于元素区域不动；若在元素区域外发生滚动，则背景区域跟随元素一起滚动；

这三种行为的具体差异可以参考MDN上的demo。

background-origin

这个属性是用来指定背景图初始位置（background-position）相对的区域。其可选值也是<box>类型的：

  • content-box
  • padding-box；默认值。
  • border-box

实际上就相当于给背景图初始位置指定了一个坐标系（坐标原点就是区域的左上角）。

background-position（★）

这个属性是用来设置背景图的初始位置，其坐标系区域就是background-origin指定的区域。其可选值为：

  • <length>类型（可以为负值）
  • 百分比（可以为负值）
  • top：相当于0%（y方向）；
  • bottom：相当于100%（y方向）；
  • left：相当于0%（x方向）；
  • right：相当于100%（x方向）；

默认值为0% 0%；当仅给定一个值时，第二个值为center；有两个值时，第一个值代表x方向的位置，第二个值代表y方向的位置。需要注意的是，随着值的类型不同，图片与初始位置的对齐规则有所不同！

  • 当值为长度类型时，意为背景图左上角距离区域左边界或上边界的长度。如：10px 10px代表背景图左上角距离区域左边界10px且距离区域上边界10px。
  • 当值为百分比类型时，意为背景图对应的百分比位置对齐到区域的相应百分比的位置；如：50% 50%代表背景图的50% 50%位置（正中央）处于区域内的50% 50%这个点；0% 0%代表背景图的0% 0%位置（左上角）处于区域内的0% 0%这个点上。

注：之前总以为background-position是指定背景图左上角位于区域内的位置，不过后来一想不对劲，那为啥center center的位置又恰好是使背景图位于正中央，如果是左上角对齐那肯定就不是处于正中央了。所以我一直没想明白这个初始位置和图片的对齐规则是啥，查了很多地方都没找到，直到我找到了W3C的规范定义，终于才明白了。

为此，我专门制作了一个demo用来查看不同类型值的background-position与背景图的对齐方式，以验证上述说明。

20200206111655



A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element’s padding box. For example, with a value pair of ‘0% 0%’,the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of the padding box. With a value pair of ‘14% 84%’, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.



A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element’s padding box. For example, with a value pair of ‘2cm 1cm’, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.

—— Colors and backgrounds

background-size

这个属性是用来设置背景图的尺寸。可选值有：

  • contain：缩放图片（保持宽高比）使得图片正好能全部显示在区域内（有一边的长度正好充满相应的方向且图片没有超出区域？可能使区域有空白）。

  • cover：缩放图片（保持宽高比）使得图片正好能覆盖区域（图片可能超出区域外）。

  • 宽高值：可以为<length>类型、百分比或auto关键字；当只有一个值时设置宽度，高度为auto；当有两个值时，第一个值为宽度，第二个值为高度。

    • 当宽高值都为auto时：

    图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例， 效果同 contain。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。[1]

    • 当一个为auto另一个不是auto时：

    如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。[1:1]

    • 当两个都不是auto时，图片大小按照设置值显示。

默认值为auto auto。可以查看MDN上的demo来体会不同值的区别。

background-repeat

这个属性是用来指定背景图的重复填充规则（当区域内水平或竖直方向有空白时才能重复？）。可选值有：

  • repeat：进行重复填充；
  • repeat-x：在水平方向进行重复填充；相当于repeat no-repeat。
  • repeat-y：在竖直方向进行重复填充；相当于no-repeat repeat。
  • space：相应方向的填充不会裁剪图片，且必须有足够的空间容纳图片相应方向的长度（宽或高）才会进行重复填充；每个重复单元之间的间隔均匀分布（效果同space-between）。
  • round：当相应方向有足够的空间容纳一个图片时，之前的图片会被挤压以容纳下一个图片；反之，图片则会被拉伸。具体什么时候插入下一个图片什么时候拉伸取决于浏览器的算法实现。
  • no-repeat：不会重复填充；

当只给定一个值时，相当于水平和竖直方向的重复规则是一致的；有两个值时，第一个为水平重复规则，第二个为竖直重复规则。具体区别可以查看MDN的demo。

参考文档

  1. - CSS（层叠样式表） | MDN
  2. background-attachment - CSS（层叠样式表） | MDN
  3. Colors and backgrounds
  4. background-size - CSS（层叠样式表） | MDN
  5. background-repeat - CSS（层叠样式表） | MDN

  1. background-size - CSS（层叠样式表） | MDN ↩︎ ↩︎