CSS3渐变背景(gradient)代码,兼容性IE - 梁鹏程个人作品集,梁鹏程博客,帆子博客,微语,网站模版

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

  • 工作笔记
  • 工作简记
  • 微语
  • 建站资讯
  • 网站模板
  • 单页模板
  • 登录
  • 最新碎语:喜欢「万事胜意」这个词,意思是一切结果都会比想象的要好。希望看到这段话的你,在接下来的日子里,万事胜意!

    您的位置:梁鹏程个人作品集,帆子博客 >工作简记> 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="joefy.iunm" title="首 页">首 页</a></li>
                    <li><a href="bcpvu/" title="公司简介">公司简介</a></li>
                    <li><a href="ofxt/" title="最新资讯">最新资讯</a></li>
                    <li><a href="qspevdut/" title="产品展示">产品展示</a></li>
                    <li><a href="dbtf/" title="解决方案">解决方案</a></li>
                    <li><a href="mfduvsf/" title="企业相册">企业相册</a></li>
                    <li><a href="tfswjdf/" title="招贤纳士">招贤纳士</a></li>
                    <li><a href="dpoubdu/" 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快速提交
    
    召唤伊斯特瓦尔