1.雪碧图

2.滑动门

3.css3渐变背景

 

background-size:   设置背景图片大小。数值px   百分比    cover(拉伸)  contain等关键字

background-repeat:  背景图重复    no-repeat repeat-x   repeat-y

background-position:  背景图位置  0px   20px   left center right top  center bottom

 

渐变背景

线性渐变

background: -moz-linear-gradient(top, #ccc, #000);

background: -webkit-linear-gradient(top. #ccc, #000);

第一个参数：渐变的方向，top  left

第一个参数：开始的颜色

第三个参数：结束的颜色

径向渐变

radial-gradient

 

 

ie下兼容方式

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=

0

, startColorstr=

#1471da

, endColorstr=

#1C85FB

);

/*IE<9>*/

-ms-filter: 

"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"

;

/*IE8+*/