CSS background

oorzc2022年9月29日大约 6 分钟

CSS background

background属性是 CSS 中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、 background-position、background-clip、background-origin和background-size。

1. background-position

background-position是用来控制元素背景图片的位置。它接受三种值：

关键词，比如top、right、bottom、left和center
长度值，比如px、em、rem等
百分值%

其常用的值对应的坐标如下图所示：

注意

常见的值对应的效果都比较好理解，但是如果取值是非常规的百分比值的时候，其计算方法就需要注意了。

W3C规范是这样描述的：

A percentage for the horizontal offset is relative to (width of background positioning area – width of background image). A percentage for the vertical offset is relative to (height of background positioning area – height of background image), where the size of the image is the size given by 'background-size'.

也就是说：当背景图片尺寸(background-size)不做任何的重置时，水平百分比的值等于容器宽度减去背景图片宽度得到的差值的百分比值。垂直百分比的值等于容器高度减去背景图片高度得到的差值的百分比值。

比如前面的示例，如果取值background-position: 75% 50%;，背景图片的起始位置：

水平位置 x 轴： (410 - 100) * 75% = 232.5px
垂直位置 y 轴： (210 - 100) * 50% = 55px

通过一个 Gif 图来描述其对应的效果：

将来的特性

background-position未来将具有的一个特性，就是可以显式的通过关键词指定背景图片距离容器的位置。

background-position: left 10px top 15px;  /* 10px, 15px */
background-position: left      top    ;   /*  0px,  0px */
background-position:      10px    15px;   /* 10px, 15px */
background-position: left          15px;  /*  0px, 15px */
background-position:      10px top    ;   /* 10px,  0px */
background-position: left      top 15px;  /*  0px, 15px */
background-position: left 10px top    ;   /* 10px,  0px */

转摘：你真的了解background-position

2. background-clip 背景剪裁

背景裁剪确定了背景画布的区域。可应用于所有元素。无继承性。

可选值有：

border-box：背景图片或者颜色描绘区域延伸到边框边界，这是默认值
padding-box：背景图片或者颜色描绘区域只能在盒子 padding 区域
content-box：背景图片或者颜色描绘只能在内容区域起作用。

3. background-origin 背景图片原点

背景图片原点原点属性严格意义上来说是针对 css 中使用图片属性background-image的情况下使用的，因为只有引用了背景图片之后才能发挥其原点的微妙区别。

可选值：

padding-box：这是它的默认值，与背景裁剪属性默认值有所不同。该值确定了背景相对填充框作为原点位置，并且拉伸整个元素 padding 盒子，即从左上角到右下角拉伸，整个背景被拉伸自适应元素的宽高，这点在有border-width的时候特别明显；
border-box：规定了背景图片原点位置相对边框盒子
content-box：规定了背景图片原地位置相对内容区盒子

注意：

1. 假如背景图片使用了background-attachment: fixed那么这个值是不起作用的，背景区域就是初始包含块。
1. 假如background-clip: padding-box，background-origin: border-box，background-position: top left(也就是初始位置)，并且元素有一个非 0 数值边框宽度，那么左侧和顶部边框的图片会被裁剪。

background-repeat

在 CSS2.1 中background-repeat具有四个属性值repeat、repeat-x、repat-y和no-repeat。在 CSS3 中，新增了两个值：round、space。

repeat

background-repeat取值为repeat时，表示背景图片沿容器的 X 轴和 Y 轴平铺。将会平铺满整个容器。如果背景图片的尺寸和容器尺寸不能完全匹配之时，会造成背景图片不全。如下图所示：

repeat-x

repeat-x可以说是repeat的分值之一，表示背景图片沿容器的 X 轴平铺。和repeat有点类似，有可能在容器最右侧不具备背景图片展示的空间，造成背景图片显示不全。

repeat-y

repeat-y和repeat-x类似，不同的是，repeat-y让背景图片沿容器 Y 轴方向平铺背景图片。同样的道理，如果使用repeat-y有可能造成容器底部没有足够的空间展示整个背景图片。

no-repeat

no-repeat刚好和repeat相反，表示背景图片不做任何平铺，也就是说背景图片有多大，在容器显示出来的效果就有多大。使用no-repeat时也会有背景图片显示不全的情况，那就是当容器的尺寸小于背景图片尺寸的时候。

round

取值为round时，会像repeat一样，背景图片会平铺整个容器，但和repeat不一样的是，他会根据容器尺寸和图片尺寸做一个自适应处理，不会像repeat一样，造成图片显示不全。

当图片重铺的次数不适合一个整数时，会重新调整，使图片按整数平铺在整个容器中。类似于background-size一样会自动计算背景图片尺寸。假设我们有一个 520 x 320 的容器，背景图片尺寸是一个 100 x 100 的，那么他会在 x 轴平铺 5 次，在 y 轴平铺 3 次，其计算如下：

round(520 / 100) = round(5.2) = 5
round(320 / 100) = round(3.2) = 3

这样，通过设置整数的重复次数，和调整背景图片的尺寸，会使其铺满整个背景而不会有截断。

space

取值为space时，和round又会不一样，但也有类似之处。

类似之处是，背景图片会平铺整个容器，不会造成背景图片裁剪；但也和round将不一样，使用space时，不够整数背景图片平铺整个容器的时候，会将剩余的空间平均分配给相邻背景之间。

假设我们的容器是 520 x 320，而背景图片的尺寸是 100 x 100。那么水平方向将会平铺 5 张背景图，而相邻两张背景图之间会有一个 20 / 5 = 4 间距。同样道理，在垂直方向也会适当的间距。甚至，如果在某个方向上只有一个允许平铺的次数不超过两次的时候，就仅仅会重复一次。来看一个效果：