[TOC] ## 1.渐变色 ### 一半蓝一半绿 ``` background: linear-gradient(to right, blue 50%, green 50%) ``` ## 2.背景吸附 ``` background: url(1.jpg) no-repeat; background-attachment: fixed; //背景图片相对视图窗口固定 background-attachment: scroll //背景图片随窗口滚动而滚动 ``` ## 3.雪碧图 ``` background-position：-xpx -ypx; ``` 雪碧图就是将所有的小图标放到一张图片上，通过移动背景来显示相应的图片， 好处是，减少了页面对图片的加载，网页的http请求 替代方案 用iconfont代替 iconfont的好处： 1. 自由变化大小 2. 自由修改颜色 3. 可以添加一些视觉效果如：阴影、旋转、透明度。 4. 兼容IE6