css之backgroud

阅读目录

• 一、background
• 二、属性
• 三、缩写规则
• 四、部分属性说明
• 1.background-size
• 2.backgroud-position

一、background

background属性是所有背景属性的缩写，通常建议在代码中使用该缩写属性，而不是使用多条单独的背景属性，因为该缩写属性在老版本浏览器中支持性更好，而且书写简便。未写在缩写属性中的其他背景属性，则会采用默认值。

二、属性

共包含9种属性，除了background-blend-mode属性以外，其他8种属性全都支持通过background属性进行简写。

• background-color：设置元素的背景颜色，默认值：transparent。
• background-image：设置元素的背景图像，默认值：none。
• background-size：设置元素背景图像的大小，默认值：auto。
• background-position：设置元素背景图像的位置，默认值：0% 0%。
• background-repeat：设置背景图像是否重复，以及如何重复，默认值：repeat。
• background-clip：设置元素背景的渲染区域，默认值：border-box。
• background-origin：设置元素背景的定位区域（背景区），默认值：border-box。
• background-attachment：设置元素的背景图像是否随页面滚动或固定，默认值：scroll。
• background-blend-mode（不支持简写）：设置元素背景层的混合模式，默认值：normal。

三、缩写规则

① background-color、background-image、background-size、background-position、background-repeat、background-attachment这六条属性的属性值可以出现0次或1次，不出现时取其默认值。
② 所有属性可以任意设置顺序，但是background-size只能紧跟在background-position属性后面出现，两条属性之间通过/连接。
③ background-clip和background-origin拥有三条相同的属性值，这三条属性值可以出现0次、1次和2次，出现0次表示都取默认值；出现1次则表示同时设置 background-clip和background-origin的属性，两者一致；出现2次则表示第一个值为 background-origin的属性值，第二个值为 background-clip的属性值。
④ 如果通过background属性设置了多个背景层，那么每个背景层之间需要通过,进行分割，按顺序从前往后渲染，当前面背景层有未能覆盖的区域，将会被后面的背景层填充。但是 background-color属性只能在最后一个背景层中设置，因为一个元素的背景颜色是唯一的。

/* 代码太长 可读性较差 */
/* 依次设置：bg-color bg-image bg-repeat bg-position/bg-size bg-origin bg-clip bg-attachment  */
 background: #ccc url(./image/img.png) no-repeat 0 0 / 100% 100% border-box border-box fixed;

/* 长度适中 可读性较好 */
/* 依次设置：bg-color bg-image bg-repeat bg-position bg-attachment */
background: #ccc url(./image/img.png) no-repeat 0 0 fixed;
background-size: 100% 100%;
background-origin: padding-box;
background-clip: border-box;

四、部分属性说明

1.background-size

length（携带css单位的数值）：

该属性值采用带有css单位的数值，来直接设置背景图像的大小，针对某个背景图像，可以设置一个或者两个数值，中间以空格相隔，数值不能为负数。常用的数值单位有：em、rem、px、vh、vw等；

当我们只设置一个数值时，这个数值将作为宽度值大小，高度值将被设定为 auto，此时图片的高度将会根据图片本身的宽高比例，以及设定的宽度，进行自适应匹配。

当我们设置两个数值时，第一个将作为宽度值大小，第二个作为高度值大小，如果此时设置的宽高并不符合图像本身的宽高比例，那图像就会被拉伸变形。

当设置的数值数量大于两个时，该属性值将成为无效属性，不被浏览器识别，浏览器会取默认值auto auto。

percentage（百分比数值）：

该属性值采用百分比%单位，来设置背景图像的大小，该百分比的基数是元素的背景区，背景区由background-origin属性指定，但是存在一种特殊情况：当background-attachment: fixed;时，背景区为浏览器的可视区，不包括滚动条。该属性值的使用方式与length基本相同，可以设置一个或者两个数值，数值不能为负数。length 与 percentage 可结合使用。

当我们只设置一个数值时，这个数值将作为宽度值大小，高度值将被设定为 auto，此时图片的高度将会根据图片本身的宽高比例，以及设定的宽度，进行自适应匹配。

当我们设置两个数值时，第一个将作为宽度值大小，第二个作为高度值大小，如果此时设置的宽高并不符合图像本身的宽高比例，那图像就会被拉伸变形。当设置属性值为100% 100% 时，背景图片的宽高等于背景区的宽高，相当于将背景图像拉伸铺满整个背景区。

当设置的数值数量大于两个时，该属性值将成为无效属性，不被浏览器识别，浏览器会取默认值auto auto。

auto（默认值，按照图像本身的大小比例）：

cover（缩放背景图片以完全覆盖背景区）：

该属性值在保持图像的宽高比例的前提下，尽可能的缩放图像以完全覆盖背景区，当背景图像和背景区的宽高比例不同时，背景图像在缩放到完全覆盖背景区后，肯定会导致一部分图像超出背景区，超出部分会被裁减掉，导致图像显示不完全的情况。

contain（缩放背景图片以完全装入背景区）：

该属性值是在保持图像的宽高比例的前提下，尽可能的缩放图像以完全放入背景区，当背景图像和背景区的宽高比例不同时，背景图像在缩放到背景区后，肯定会导致一部分背景区未被覆盖，未被覆盖的区域则会显示background-color设置的背景颜色。

2.backgroud-position

该属性规定了背景图像的位置，这个定位是相对于background-origin规定的定位区域的，该属性只对背景图像有作用，对背景颜色是不起作用的。属性值类型有：length（携带css单位的数值）、percentage（百分比数值，默认值为 0% 0%）、关键字（center、left、top等）。该属性的属性值可以使用4种语法进行定义，分别对应1~4个属性值的情况，当属性值为length或percentage时，可以为负数。

我们还可以通过background-position-x和background-position-y两条属性，来单独设置背景图像在X轴方向和Y轴方向的位置，不常用。

其他详细属性参考：

CSS 之 background 系列属性详解_background css-CSDN博客