CSS背景色渐变

试了下 渐变色  ，主要确定开始位置  结束位置，以及对应的color-stop;  以下是兼容不同浏览器的代码片段

代码：
<style type="text/css"> 
.jb_keleyi_com{ 
height: 300px; 
width:100px; 
margin:0px auto; 
background-image: -moz-linear-gradient(top, #00FF00, #FF0000); /*火狐*/
background: -o-linear-gradient(top, #00FF00 0%,red 100%);/*Opera*/
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000)); /*Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#00FF00‘, endColorstr=‘#FF0000‘, GradientType=‘0‘); /*IE*/
} 
</style>

用CSS是div颜色渐变：<br />
<div class="jb_keleyi_com">从绿到红<br /><br />keleyi.com</div>

时间： 2024-11-06 23:45:57

CSS背景色渐变的相关文章

（转）css 背景色渐变兼容写法

css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linea

css背景色渐变详解

demo下载地址:http://download.csdn.net/download/tjcyjd/8468581 直接把代码贴出来,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-s

CSS设置DIV背景色渐变显示

<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);    

CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <angle>:用角度值指定渐变的方向(或角度). to left: 设置渐变为

css中的背景色渐变以及背景图的定位

单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd)); background: linear-gradient(to bottom, #fff 0px, #ddd 100%) repeat scroll 0% 0%; 可以同时支持谷歌.火狐浏览器,兼容性比较强. 背景图的位置: background:url("images/taocan-bg.pn

巧妙地制作背景色渐变动画

有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变 + animation : 假设我们渐变的写法如下: div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); } 按照常规想法,配合 animation ,我们首先会想到在 animation 的步骤中通过改变颜色实现颜色渐变动画,那么我们的 CSS 代码可能是: div { background: linear-gradient(90deg,

jquery animate()背景色渐变的处理

jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 演示: http://runjs.cn/detail/xmax7vo3 jquery animate()背景色渐变的处理,布布扣,bubuko

CSS线性渐变

1 /*CSS线性渐变*/ 2 FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#f1f1f1); /*IE*/ 3 background:-moz-linear-gradient(top,#ffffff,#f1f1f1);/*火狐*/ 4 background:-webkit-gradient(linear, 0% 0%, 0% 100%,fr

css颜色渐变在不同浏览器的设置

在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 0, 0 100%, from(#4285fa), to(#366dcb)); from:是指渐变起始颜色 to:是指渐变结束的颜色 适用于火狐浏览器中 background: -moz-linear-gradient( top,#4285fa,#366dcb); top:是值渐变方向从上向下 第一