CSS设置DIV背景色渐变显示

转载 2015年11月19日 15:16:16
CSS设置DIV背景色渐变显示
在学习网页设计的过程中,对于背景的渐变色,好多代码的规则都一样,只是看怎么找到这个规则,现在51RGB小编带领大家看一下,这些是怎么显示的:

<style type="text/css">   
   .linear{   
       width:100%;   
       height:600px;   
       FILTER: progidXImageTransform.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:progidXImageTransform.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=100finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)  
其中各个参数的含义如下:
opacity表示透明度,默认的范围是从 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
finishopacity是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是 100
style用来指定透明区域的形状特征:
代表统一形状
代表线形
代表放射状
代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx渐变透明效果结束处的 X坐标。
finishy渐变透明效果结束处的 Y坐标。
综合上述,实现IE下含透明度变化红蓝垂直渐变的代码如下:
[css]
.gradient{
   width:300px;  
   height:150px;  
   filter:alpha(opacity=100 finishopacity=50 style=1startx=0,starty=0,finishx=0,finishy=150) progidXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
   -ms-filter:alpha(opacity=100 finishopacity=50 style=1startx=0,starty=0,finishx=0,finishy=150)progidXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}
  
<divclass="gradient"></div>  
三、Firefox浏览器下的渐变背景
对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradientFirefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:
[css]
.gradient{
   width:300px;  
   height:150px;  
   background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));   
}
  
<divclass="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)));   
}
  
<divclass="gradient"></div>  

CSS设置背景色渐变显示

.linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradi...
  • hpugym
  • hpugym
  • 2016年05月23日 15:06
  • 3035

CSS设置DIV背景色渐变显示

.linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradient...
  • gingerredjade
  • gingerredjade
  • 2013年09月30日 12:52
  • 10521

利用css实现div背景颜色动态渐变

在做比较炫酷的现代风格网页时,一个div的颜色可能是动态的,不断变化的。下面来说一下这种效果是如何实现的。 用到的css方法: (1)linear-gradient:用于设置渐变的颜色:backgro...
  • lolgenius
  • lolgenius
  • 2017年04月14日 10:19
  • 1046

div背景颜色设置成渐变色

小例子:               Document        .linear{  width:50%;  height:30px;  FILTER: ...
  • u011498933
  • u011498933
  • 2016年06月23日 22:31
  • 1909

CSS3透明背景+渐变样式

直接上效果: 核心代码如下: .map-interview { background-image:-webkit-linear-gradient( to right, r...
  • Netbug_NB
  • Netbug_NB
  • 2015年03月17日 16:33
  • 5204

div没有设置高度,背景颜色却无法显示

在设计网页时,设置了div为自动高度或不给height值,当div设置背景时在IE6可以显示背景颜色,但是IE7,8却不显示。 解决办法如下: 1、把 height:auto; 改成 height...
  • u010174173
  • u010174173
  • 2015年07月29日 11:06
  • 1620

html背景色渐变(通过CSS实现)

效果截图: -----------------------------------------------------------------------------------------...
  • friendan
  • friendan
  • 2014年03月23日 18:31
  • 35176

CSS中的渐变效果

1.渐变的含义与组成 含义:两种或多种颜色之间平滑过渡的效果 组成:由色标来组成 色标: 1、颜色 2、颜色出现的位置 2.渐变的属性和取值 1、属性       ...
  • baidu_25343343
  • baidu_25343343
  • 2016年10月08日 01:52
  • 1432

CSS布局与定位——height百分比设置无效/背景色不显示

CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处...
  • Sparrowflying
  • Sparrowflying
  • 2017年05月24日 16:06
  • 1067

CSS实现表格背景色渐变色

.xr td { font-family: "Tahoma"; font-size: 12px; font-weight: bold; text-align: center; Filter: Alph...
  • ecren
  • ecren
  • 2007年04月16日 15:38
  • 807
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS设置DIV背景色渐变显示
举报原因:
原因补充:

(最多只允许输入30个字)