属性名称 | 中文注释 | 备注 |
---|---|---|
background-image |
背景图片 | url(img-path) |
background-color |
背景颜色 | |
background-attachment |
设置背景固定 | scroll 默认值,随盒子滚动, fixed 固定,脱离标准流,固定在浏览器窗口,当背景图片不在盒子的显示范围之内,图片将不会展示 |
background-repeat |
背景平铺 | repeat-x 横向平铺, repeat-y 纵向平铺, no-repeat 不平铺 |
background-position |
设置背景图片的位置 | 第一个值是水平位置,第二个值是垂直的位置,起点0 0 是图片与容器左上角对齐(注意:这是背景图片没有被设置成fixed 的情况,设置成fixed 则会相对于整个页面窗口设置位置) |
background-size |
设置背景图片大小 | - 两个值 宽,高,设置这个可能会导致图片失真 - cover 图片等比例放大,全部覆盖容器,但是图片超过的部分不显示- contain 图片等比例放大,尽量覆盖容器,但是不会以图片失真为代价覆盖整个容器,所以可能会有部分地区不能完全覆盖 |
background |
背景缩写 | 可以合并background-color 、background-image 、background-repeat 、background-position 、background-attachment ,没有固定的顺序,任何属性都能省略,但是省略会覆盖你前面这些属性设置的值,不能合并background-size |