【转】CSS设置DIV背景色渐变显示
- 【原链接】http://www.2cto.com/kf/201310/248187.html
- <style type="text/css">
.linear{width:100%;height:600px;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/}</style><body><div class="linear"></div></body>一、有点俗态的开场白要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。二、IE浏览器下的渐变背景IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:[css]filter: 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背景渐变的用法类似。例如下面的使用:[css]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坐标。综合上述,实现IE下含透明度变化红蓝垂直渐变的代码如下:[css].gradient{width:300px;height:150px;filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);}<div class="gradient"></div>三、Firefox浏览器下的渐变背景对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:[css].gradient{width:300px;height:150px;background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));}<div class="gradient"></div>四、chrome/Safari浏览器下的渐变背景实现对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient,使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了,参见下面的代码:[css].gradient{width:300px;height:150px;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));}<div class="gradient"></div>补充于2011-04-07Opera11也支持了CSS3渐变。其用法与Firefox一致,需要使用-o-的前缀。另外,Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。五、综合 – 兼容性的渐变背景效果相关代码如下:[css].gradient{width:300px;height:150px;filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/background:red; /* 一些不支持背景渐变的浏览器 */background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));}<div class="gradient"></div>六、结语CSS3的潜力非常的大,就渐变这一块可以创建很多精湛的UI效果,而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数,也就是降低了HTTP请求,是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味,得使用资源消耗很高的滤镜才能实现渐变效果。所以,目前而言,渐变背景的的应用与否还是有待于利弊权衡的。
【转】CSS设置DIV背景色渐变显示的更多相关文章
- CSS设置DIV背景色渐变显示
本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...
- CSS设置DIV背景色渐变
div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...
- JS---案例:点击按钮设置div背景色渐变
案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...
- CSS布局与定位——height百分比设置无效/背景色不显示
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- 设置DIV隐藏与显示,表格滑动条
问题描述: 现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决: (1)DIV块的隐藏与显示 如上所示, ...
- CSS设置DIV边框为圆角,添加背景色溢出的问题
这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...
- CSS设置文本末行显示省略号...
首先设置文本标签或文字所在标签的宽度 最主要是以下三点: ①white-space:nowrap;如果是中文需要设置行末不断行 ②overflow:hidden;设置控 ...
随机推荐
- 【转】2014年25款最好的jQuery插件
2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP 时间:2014-12-30 10:24:10 阅读数:2267 分享到: 0 http://www.php10 ...
- 三、Python 变量、运算符、表达式
3.1 变量 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,值可以改变,其实是将值在内存中保存地址位交给变量,变量去内存中获取,重新赋值,改变的就是内存地址位. 命名: 变量名由字母.数字 ...
- OC NSString 基本操作(用到补充持续更新)
1.将字符串拆分成数组 NSString *string = @"1,2,3,4"; NSArray *array = [string componentsSeparatedByS ...
- C++自学计划
课程描述 课程名称:C++远征之起航篇&C++远征之离港篇 授课人姓名:james_yuan 课程链接地址 C++远征之起航篇 C++远征之离港篇 章节列表 选择理由 一开始在自己比较熟悉的网 ...
- CentOS安装crontab及使用方法(汇总多人博客并实践确认无误)
安装centOS: yum -y install vixie-cron --该软件包是cron的主程序 yum -y install crontabs--该软件包用来安装.卸载或者列举需要cron来守 ...
- C# 写的一个生成随机汉语名字的小程序
最近因为要做数据库相关的测试,频繁使用到测试数据,手动添加太过于麻烦,而且复用性太差,因此干脆花了点时间写了一个生成随机姓名和相关数据的类,贴在这里,有需用的同志们可以参考一下.代码本身质量不好,也不 ...
- DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...
- Javascript跨域
跨域:只要协议.域名或端口有任何一个不同,就定义为跨域. CORS(Cross-Origin Resource Sharing):即跨域资源共享.定义了在访问跨域资源时,浏览器和服务器该如何沟通.CO ...
- DotSpatial 删除图层要素
//添加图层后,定义图层,并获取图层 //遍历要素,并进行删除 FeatureSet fs = null; fs = (FeatureSet) map1.Layers[0].DataSet; //要素 ...
- C#变量详解
1,变量的分类: C#是一种类型安全的语言.每一个变量都要求定义为一个特定的类型,并且要求存储在变量中的值只能是这种类型的值. 值类型 在C#中你可以通过声明枚举类型或是结构类型来定义你自己的值类型. ...