CSS3/CSS1 background-image 属性
语法:
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none
取值：
none：无背景图。
< url >：使用绝对或相对地址指定背景图像。
< linear-gradient>：使用线性渐变创建背景图像。（CSS3）
< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）
< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）
< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）
演示请看本站导航，不支持IE678。
HTML（header-navigation是用来指定导航样式的，id=header是用来驱动js的，这里id要和下面js里的document.getElementById相同）
header class="header-navigation" id="header" 这是导航 /header
CSS
.header-navigation {
position: fixed;
top: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #333;
text-align: center;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
z-index: 9999;
}
/* Slide transitions */
.slideUp {
/* -webkit-transform: translateY(-100px);
transform: translateY(-100px);*/
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
/*transition: transform .5s ease-out;*/
-webkit-transition: transform .5s ease-out;
-o-transition: transform .5s ease-out;
transition: transform .5s ease-out;
}
.slideDown {
/*-webkit-transform: translateY(0);
transform: translateY(0);*/
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
/*transition: transform .5s ease-out;*/
-webkit-transition: transform .5s ease-out;
-o-transition: transform .5s ease-out;
transition: transform .5s ease-out;
} #x_contant a img{
display:block;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
width:125px;
height:125px;}
#x_contant a:hover img{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);}首先来看看效果图：