梁鹏程个人作品集,帆子博客

最新碎语:也许你给的是最好的,但不一定是她想要的!

您的位置:梁鹏程个人作品集,帆子博客 >工作简记> CSS3渐变背景(gradient)代码,兼容性IE

CSS3渐变背景(gradient)代码,兼容性IE

先上代码:

CSS:

.nav_bg{
	width: 100%;
	height: 44px;
	overflow: hidden;
	
	/*支持背景渐变的浏览器*/
	background-image:-webkit-linear-gradient(left, #008df6, #001aa5);
	background-image:linear-gradient(left, #008df6, #001aa5);

	/*IE*/
	filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=-44) 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#008df6,endcolorstr=#001aa5,gradientType=1);
	-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=-44)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#008df6,endcolorstr=#001aa5,gradientType=1);
	
	/* 一些不支持背景渐变的浏览器 */ 
	background:#008df6; 

}
.nav{ width:1200px; height:44px; overflow:hidden; margin:auto;}
.nav ul li{ float:left; width:150px; height:44px; text-align:center;}


HTML:
    <div class="nav_bg">
        <div class="nav">
            <ul>
                <li><a href="index.html" title="首 页">首 页</a></li>
                <li><a href="about/" title="公司简介">公司简介</a></li>
                <li><a href="news/" title="最新资讯">最新资讯</a></li>
                <li><a href="products/" title="产品展示">产品展示</a></li>
                <li><a href="case/" title="解决方案">解决方案</a></li>
                <li><a href="lecture/" title="企业相册">企业相册</a></li>
                <li><a href="service/" title="招贤纳士">招贤纳士</a></li>
                <li><a href="contact/" title="联系我们">联系我们</a></li>
            </ul>
        </div>
    </div>


效果:

背景渐变效果


相关说明:

progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); 
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。
上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用:


filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

其中各个参数的含义如下:
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。


---

转载请注明本文标题和链接:《CSS3渐变背景(gradient)代码,兼容性IE

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交