背景图片background的一些常用设置

分享我在项目开发中用到的background的设置。

    background-image: url();/*背景图片的url*/
    background-repeat: no-repeat;
    background-size: cover;/*背景图基于容器大小伸缩*/
    background-attachment: fixed;/*固定，不随其余部分滚动*/
    background-clip: border-box;/*设置元素的背景延伸到边框下面*/
    /*background-position: 为image设置初始位置*/
    /*background-origin:   基于什么进行定位*/

各个属性值的意思都可以百度到，这里就是说一下我做项目时用到的几个属性值的组合。

重点说一下background-size属性。是指定背景图片的大小，这个属性有四个值，可以自定义设置（length），也可以自定义百分比设置（percentage），剩下的值就是cover和contain了，我简单的理解为cover是找到合适的比例铺满整个屏幕，多余的可以裁掉。contain则是确保背景图片在屏幕中是完整的，不允许裁掉，在background-repeat属性可以重复时，平铺背景图，不可以重复时则会留白。

background-size：cover

background-size：contain 并且 background-repeat：repeat

要是只是设置一个简单的静态的背景图，我觉得上面的属性就足够了，根据自己的情况还可以使用background-position 设置图片的初始位置，backgrpund-origin设置图片基于什么定位（content-box|padding-box|border-box）。