CSS设置DIV背景色渐变显示

最新推荐文章于 2024-04-22 13:50:02 发布
最新推荐文章于 2024-04-22 13:50:02 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 转载以及分享 文章标签： css 网页设计
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 表示透明度，默认的范围是从 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=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 gradient 在 Firefox3.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>  
zhengshaofeng1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div背景颜色怎样渐变 css实现div层背景颜色渐变代码
09-25
CSS控制DIV层背景颜色渐变是一个相当不错的效果，看起来很夺目的，本文也尝试着实现一个类似这样的效果，感兴趣的朋友可不要错过了啊，或许本文所提供的对你学习css有所帮，好了话不多说切入正题
div 窗口淡入淡出渐变效果
07-29
在我的爱社区网中要显示二级频道,以前用的下拉也不太好看，所以想做个淡入淡出的div 显示，开始只是想实现这个效果，后来干脆就封装成一个方法了，有两种渐变的效果，当然大家也可以拓展，如果有什么问题或好的方法好的建议可以qq联系 303409914，也希望大家能光临我现在专注的项目 www.2shequ.com. 压缩包里直接运行test.htm 页面就可以看到效果了
div自定义部分区域的背景颜色（主要技术点：颜色渐变linear-gradient）
我就叫贝塔
05-09 1608
div自定义部分区域的背景颜色（主要技术点：颜色渐变linear-gradient）实现，统计投票数，根据投票数给选项实现百分比的颜色显示
div背景颜色设置成渐变色
u011498933的专栏
06-23 8430
小例子：               Document        .linear{  width:50%;  height:30px;  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFF99, endColorStr=#6666C
css 背景渐变填充指定宽度
且听风吟的博客
05-24 394
css 背景渐变填充指定宽度
div+css+js实现渐变色根据按百分比显示的横向柱状图
qq_42112979的博客
09-04 1995
div+css+js实现渐变色根据按百分比显示的横向柱状图 echarts完成不了我的需求，尝试用最原始的方法画一个横向渐变色柱状图 一起加油 文章目录div+css+js实现渐变色根据按百分比显示的横向柱状图前言一、目标展示？二、代码1.js2.html总结 前言 echarts完成不了我的需求，尝试用最原始的方法画一个横向渐变色柱状图 提示：以下是本篇文章正文内容，下面案例可供参考 一、目标展示？ 没错，又是这张图，可以看到用echarts的话左边图片不好对其而且鼠标悬浮背景色的柱子会出现前面
CSS学习笔记 06、背景与渐变
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 479
文章目录前言一、背景1.1、背景颜色(background-color)1.2、背景图片(background-image)1.2.1、基本认识1.2.2、重复模式(background-repeat)四种模式演示水平垂直平铺案例1.2.3、背景尺寸(background-size)1.2.4、背景裁切(background-clip)1.2.5、background-attachment属性1.2.6、背景位置属性(background-position)认识属性及基本使用CSS精灵(配合位置属性使用)C
div渐变
yan5136970的专栏
11-21 350
.change{  width:100%;  height:600px;  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/  background: -ms-linear-gra
CSS基础学习--26 渐变（Gradients）
yyxhzdm的博客
06-24 2608
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
[CSS] - 实现兼容性的渐变背景(gradient)效果
weixin_30270889的博客
02-15 272
来源：http://www.zhangxinxu.com/wordpress/?p=743 一、有点俗态的开场白 要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不...
css背景色渐变
03-03
css背景色渐变
CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌
09-25
DIV背景色渐变在以前的文章中也有介绍过，但并没有同时兼容IE、火狐、谷歌，而本文的这个示例却可以同时兼容，建议喜欢的朋友参考下
css教程实现div背景色渐变色代码分享
09-25
一个简单div+css背景渐变色代码，大家参考使用吧
css设置背景色渐变
xiejunna的博客
01-14 3137
css完成以下如图背景色 css样式 #div1 { width: 100%; height: 100px; background: #0068B5;/* 为较旧的或者不支持的浏览器设置备用属性 */ background: -moz-linear-gradient(left, #0068B5 0%, #7CAFE1 100%);/**/ background: -webkit...
背景属性
m0_72630538的博客
08-06 227
background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区显示background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示 2、渐变 从一种颜色到其他颜色的过渡（两种及两种以上颜色）线型渐变 ： 从一个方向到另一个方向的渐变 重复线性渐变 2）径向渐变 radial-gradient 径向渐变 ： 一个
背景，渐变
qq_42238554的博客
04-23 955
渐变 边框 border-radius 圆角： border-radius:10px; border-image 边框图片： border-image 投影 box-shadow 投影： box-shadow:10px 10px 10px 10px #ff5200; 背景 background-size 设置背景图片的尺寸。 background-origin 规定背景图片的定位区域。 ba...
CSS3实现渐变背景动画特效
明哥
03-21 2169
效果图： 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变背景动画</title> <style> body{ height: 100vh; width: 100vw; margin:
html div背景颜色渐变
热门推荐
java小白白之没有最白的博客
08-25 1万+
div部分 <div class="tag_cutover"> </div> css部分 .tag_cutover{ width: 100px; heigh: 100px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr= #2064d0,endColorStr=#070e42); /*IE 6 7 8*/ background: -ms-linea
CSS基础常用属性之字体属性（如果想知道CSS的字体属性知识点，那么只看这一篇就足够了！）
最新发布
秋刀鱼不做梦的编程日常
04-22 1270
CSS基础常用属性之字体属性（如果想知道CSS的字体属性知识点，那么只看这一篇就足够了！）
如何在html中写背景渐变色,css怎样设置div背景色渐变？
05-26
举个例子，假设我们想要在一个div元素中设置背景渐变色，可以使用以下代码： ```html <div class="gradient"></div> ``` ```css .gradient { background: linear-gradient(to right, #ff9966, #ff5e62); } ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值