欢迎各界计算机爱好者加入,弘扬极客精神!

背景的渐变色怎么实现?css

0 喜欢 0 不喜欢
背景的渐变色怎么实现?css
最新提问 11月 7 分类:WEB开发 | 用户: Strlonve (8,308 分)  

登录 或者 注册 后回答这个问题。

4 个回答

0 喜欢 0 不喜欢
语法
 
background: linear-gradient(direction, color-stop1, color-stop2, ...);
 
从上到下的线性渐变:
 
#grad { 
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(red, blue); /* 标准的语法 */ 
 
从左到右的线性渐变:
 
#grad { 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to right, red , blue); /* 标准的语法 */ 
最新回答 11月 8 用户: Mr.Devil (7,368 分)  
0 喜欢 0 不喜欢

startcolorstr, endcolorstr, 以及gradientType。

其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。

最新回答 11月 28 用户: Qyoung (2,872 分)  
0 喜欢 0 不喜欢
从左到右的线性渐变:
 
#grad { 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to right, red , blue); /* 标准的语法 */ 
最新回答 12月 2 用户: J.O (2,430 分)  
0 喜欢 0 不喜欢

既然是要设置div渐变,所以我们就需要先使用一个div标签;

然后在header标签里面设置<div>标签的css样式;

颜色渐变要有一个范围,所以小伙伴们需要给div设定width和height,也就是宽度和高度;

然后设定div的background背景属性,如图所示,背景颜色渐变就用到-webkit-linear-gradient;

接着,在-webkit-linear-gradient里面写top,设定渐变从顶部开始,到底部结束。在这里需要注意的是,写了top就不要写bottom了;

之后,再设定颜色的渐变顺序,比如我设置了从白色渐变到蓝色。温馨提示,颜色可以设定多个的。

最新回答 12月 8 用户: 一二一 (2,892 分)  
...