CSS设置DIV背景色渐变显示
2015-11-19 15:16
627 查看
CSS设置DIV背景色渐变显示 [align=left]在学习网页设计的过程中,对于背景的渐变色,好多代码的规则都一样,只是看怎么找到这个规则,现在51RGB小编带领大家看一下,这些是怎么显示的:[/align] [align=left] [/align] [align=left]<style type="text/css"> [/align] [align=left] .linear{ [/align] [align=left] width:100%; [/align] [align=left] height:600px; [/align] FILTER: progid XImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE 6 7 8*/ [align=left] background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ [/align] background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0%100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ [align=left] background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/[/align] [align=left] background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/ [/align] [align=left] background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/ [/align] [align=left] } [/align] [align=left]</style> [/align] [align=left] [/align] [align=left]<body>[/align] [align=left] <div class="linear"></div> [/align] [align=left]</body>[/align] [align=left][/align] [align=left][/align] [align=left]一、有点俗态的开场白[/align] [align=left]要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。[/align] [align=left]本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。[/align] [align=left]二、IE浏览器下的渐变背景[/align] [align=left]IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:[/align] [align=left][css][/align] filter:progid XImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); [align=left][/align] [align=left]相关说明:[/align] [align=left]上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。[/align] [align=left]其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。[/align] 上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用: [align=left][css][/align] [align=left]filter:alpha(opacity=100finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60) [/align] [align=left][/align] [align=left]其中各个参数的含义如下:[/align] [align=left]opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。[/align] [align=left]finishopacity是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。[/align] [align=left]style用来指定透明区域的形状特征:[/align] [align=left]0 代表统一形状[/align] [align=left]1 代表线形[/align] [align=left]2 代表放射状[/align] [align=left]3 代表矩形。[/align] [align=left]startx 渐变透明效果开始处的 X坐标。[/align] [align=left]starty 渐变透明效果开始处的 Y坐标。[/align] [align=left]finishx渐变透明效果结束处的 X坐标。[/align] [align=left]finishy渐变透明效果结束处的 Y坐标。[/align] [align=left]综合上述,实现IE下含透明度变化红蓝垂直渐变的代码如下:[/align] [align=left][css][/align] [align=left].gradient{[/align] [align=left] width:300px; [/align] [align=left] height:150px; [/align] filter:alpha(opacity=100 finishopacity=50 style=1startx=0,starty=0,finishx=0,finishy=150) progid XImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); -ms-filter:alpha(opacity=100 finishopacity=50 style=1startx=0,starty=0,finishx=0,finishy=150)progid XImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); [align=left]}[/align] [align=left] [/align] [align=left]<divclass="gradient"></div> [/align] [align=left][/align] [align=left]三、Firefox浏览器下的渐变背景[/align] 对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码: [align=left][css][/align] [align=left].gradient{[/align] [align=left] width:300px; [/align] [align=left] height:150px; [/align] [align=left] background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); [/align] [align=left]}[/align] [align=left] [/align] [align=left]<divclass="gradient"></div> [/align] [align=left][/align] [align=left]四、chrome/Safari浏览器下的渐变背景实现[/align] 对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient,使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了,参见下面的代码: [align=left][css][/align] [align=left].gradient{[/align] [align=left] width:300px; [/align] [align=left] height:150px; [/align] [align=left] background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000),to(rgba(0, 0, 255, 0.5))); [/align] [align=left]}[/align] [align=left] [/align] [align=left]<divclass="gradient"></div> [/align] |
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题