CSS background 元素背景图用法全解

background 可设置背景色、渐变、背景图等，本文主要讲解背景图片的用法。 背景顾名思义就是背后的景色，始终居于元素背后，元素永远站在背景的身前。 本文示例中所使用的图片：  ## background 背景 background 此属性是一个简写，其包含的内容有点多： `background-clip` 设置裁剪显示区域 `background-color` 设置背景颜色 `background-image` 设置背景图片 `background-origin` 设置背景原点位置 `background-position` 设置背景图片初始位置 `background-repeat` 设置背景图片重复方式 `background-size` 设置背景图片尺寸 `background-attachment` 设置背景图片是否随页面滚动 可以在一次声明中定义一个或多个属性背景相关的值。 ### 设置背景色 `background-color: #ccc;` 等同于 `background: #ccc;`  ### 设置背景图片 `background-image`  注意看边框之下还出现了一部分背景图，这便是背景重复与裁剪默认属性影响的。 ### 设置背景原点位置 `background-origin` 和 背景显示区域 `background-clip` 常用三个值： `padding-box` ：背景摆放以 padding 区域为参考（默认值） `border-box` ：背景摆放以 border 区域为参考 `content-box` ：背景摆放以 content 区域为参考 以上值可能出现 0 次、1 次或 2 次。 如果出现 1 次，它同时设定 background-origin 和 background-clip。如下：  如果出现 2 次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。如下：  不同值的区别：  ### 设置背景图片初始位置 `background-position` 此属性可以使用关键字，也可以使用百分比，还可以是固定像素。 关键字 `center` = `50%` 、 `top` = `0%` 、 `left` = `0%` 、 `bottom` = `100%` 、 `right` = `100%` 注意：本例中使用了 `background-repeat: no-repeat;` 控制背景图片不重复，使用 `background-size: 60px;` 控制背景图片宽度为 60px。 **一个值用法** 关键字 `center`，用来居中背景图片。  关键字 `top` 、 `left` 、 `bottom` 、 `right` 用来指定把这个背景图片放在哪一个边界，另一个维度被设置成 50% 也就是 center 。  **两个值用法** 一个定义水平方向 x 坐标，另一个定义垂直方向 y 坐标。 特别注意：使用关键字不分先后，浏览器会自动排序识别，比如 `top left` 和 `left top` 都是正确的。但使用百分比和固定像素时需注意，第一个值一定是 x 坐标，第二个值一定是 y 坐标。如果位置不对，浏览器会判断值无效，比如 `bottom 5%` 和 `5px left` 都是无效写法。  使用固定像素：  **三个值用法** 其中两个值是关键字值，第三个是前面值的偏移量。 比如 `left 10px bottom` 表示将背景图片放在左边 10px，距离底部 0px。  比如 `left bottom 10px` 表示将背景图片放在左边 0px，距离底部 10px。  **四个值用法** 第一个和第三个值是定义水平方向 x 和垂直方向 y 的关键字值，第二个和第四个值是前面 x 和 y 关键字值的偏移量。 比如 `right 10px bottom 20px` 表示将背景图片放在右边 10px，距离底部 20px。  ### 设置背景图片重复方式 `background-repeat` 其值可以是单值，也可以是双值，双值第一个值是水平方向 x 轴，第二个值是垂直方向 y 轴。 | 单值 | 等价于双值 | | --- | --- | | repeat-x 重复水平 x 轴 | repeat no-repeat | | repeat-y 重复垂直方向 y 轴 | no-repeat repeat | | repeat 水平和垂直方向都重复 | repeat repeat | | space 重复并且使用间距填充 | space space | | round 重复并且进行缩放 | round round | | no-repeat 不重复 | no-repeat no-repeat | **四种常见用法：**  **space** 背景也会重复显示，但会保证最后一个背景图完整显示，多出来的空间重复元素之间会留白，比如：  如图蓝色区域便是重复元素之间的留白。 **round** 背景也会重复显示，也会保证最后一个背景图完整显示，如果有多出来的空间，则背景图进行缩放显示，比如：  space 、 round 、 repeat 三种方式对比：  ### 设置背景图片尺寸 `background-size` 其值也可以一个值或两个值，只有一个值时，第二个值会默认为 `auto` ，比如 `background-size: 60px;` 等价于 `background-size: 60px auto;`。  `cover` 等比缩放背景图片以完全覆盖盒子，长宽至少有一面能完全展示，可能背景图片有部分看不见。如下便是宽度完全展示，高度被裁切了：  `contain` 等比缩放背景图片让盒子完全能装下整个背景图，长宽都能完全展示，可能盒子背景会部分空白。如下宽高都完全显示，由于等比缩放，所以宽度出现了留白：  ### 设置背景图片是否随页面滚动 `background-attachment` `background-attachment: fixed;` 相对于浏览器窗口固定，不随内容滚动，如下：  `background-attachment: local;` 会随着内容滚动，像是内容一部分一样，如下：  `background-attachment: scroll;` 相对于元素本身固定，而不随着内容滚动，如下：  ## 多个背景图片使用方法 在古老的过去，背景图是不允许使用多张图片的，如果使用多个背景图必须使用多个盒子元素，后来 CSS3 的引入了新的规范，允许一个盒子元素使用多张背景图片。使用方法如下： ```csharp .box { background: no-repeat center/80% url('./0.png'), no-repeat bottom/80% url('./1.png'); } ``` ## 总结 本文介绍了 CSS 背景图的基础用法，强大的 `background` 属性还可设置各种渐变，容后文介绍。 -参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background