文档章节

CSS3实现背景颜色渐变

wdsjndtk
 wdsjndtk
发布于 2015/12/02 15:36
字数 956
阅读 22
收藏 0

   基本语法:

background-image:-webkit-gradient( 
type, 
x1, 
y1, 
x2, 
y2, 
from(开始颜色值), 
to(结果颜色值), 
[color-stop(偏移量小数,停靠颜色值),...] 
);-webkit-gradient( 
type, 
start_point, 
end_point, 
stop... 
)

 

  参数类型简要说明:

 

  type渐变的类型,分为线性渐变(linear)和径向渐变(radial)

  start_point渐变图片中渐变的起始点

  end_point渐变图像中渐变的结束点

  stopcolor-stop()方法,指定渐变进程中特定的颜色

  inner_center内部中心点,径向渐变起始圆环

  inner_radius内部半径,径向渐变起始圆

  outer_center外部渐变结束圆的中心点

  outer_radius外部渐变结束圆的半径

 

  1、start_point(x1,y1),end_point(x2,y2),这里的x,y对应左上角为起点的坐标,此处的x,y参数表示与css中的background-position是一致的,可以使用像素、百分比或者left,top,right,bottom。

  当x1=x2,y1≠y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;

  bbackground-image:-webkit-gradient(linear,0%0%,0%100%,from(#fff800),to(#f60));

  当y1=y2,x1≠x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;

  bbackground-image:-webkit-gradient(linear,0%0%,100%0%,from(#fff800),to(#f60));

  当y1≠y2,x1≠x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;

  bbackground-image:-webkit-gradient(linear,10%30%,100%100%,from(#fff800),to(#f60));

  当x1=x2,y1=y2,没有渐变。

 

  2、color-stop是一个过渡点,相当于ps里面,多添加一个渐变的点,有两个参数,一个是点的位置,另外一个是过渡点的颜色。

  background-image:-webkit-gradient(linear,0%0%,100%0%,from(#fff800),to(#f60),color-stop(20%,#fff));

  background-image:-webkit-gradient(linear,0%0%,100%0%,from(#fff800),to(#fff),color-stop(20%,#fff),color-stop(20%,#f60));

 

  3、创建径向渐变

  background-image:-webkit-gradient(radial,4545,10,5250,30,from(#fff800),to(#f60),color-stop(90%,#c00));

 

      几种主流浏览器兼容的写法:

 

  一.Webkit浏览器

 

  (1)第一种写法:

 

  background:-webkit-gradient(linear,10%10%,100%100%,

  color-stop(0.14,rgb(255,0,0)),

  color-stop(0.5,rgb(255,255,0)),

  color-stop(1,rgb(0,0,255)));

  第一个参数:表示的是渐变的类型

  linear线性渐变

  第二个参数:分别对应x,y方向渐变的起始位置

  第三个参数:分别对应x,y方向渐变的终止位置

  第四/五/N个参数:设置渐变的位置及颜色

 

  (2)第二种写法:这种写法比较简单,而且效果比较自然

 

  background:-webkit-gradient(linear,00,0100%,from(#2074af),to(#2c91d2));

  第一个参数:表示的是渐变的类型

  linear线性渐变

  第二个参数:分别对应x,y方向渐变的起始位置

  第三个参数:分别对应x,y方向渐变的终止位置

  第四个参数:设置了起始位置的颜色

  第五个参数:设置了终止位置的颜色

 

  二.Mozilla浏览器

 

  (1)第一种写法:

 

  background:-moz-linear-gradient(101090deg,

  rgb(25,0,0)14%,

  rgb(255,255,0)50%,

  rgb(0,0,255)100%);

  第一个参数:设置渐变起始位置及角度

  第二/三/四/N个参数:设置渐变的颜色和位置

 

  (2)第二种写法:这种写法比较简单,而且效果比较自然

 

  background:-moz-linear-gradient(top,#FFC3C8,#FF9298);

  第一个参数:设置渐变的起始位置

  第二个参数:设置起始位置的颜色

  第三个参数:设置终止位置的颜色

 

  三.IE浏览器

 

  IE浏览器实现渐变只能使用IE自己的滤镜去实现

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);

  第一个参数:渐变起始位置的颜色

  第二个参数:渐变终止位置的颜色

  第三个参数:渐变的类型

  0代表竖向渐变1代表横向渐变

 

     例子:

<!DOCTYPE HTML>
<html>
    <head>
     <meta charset="gb2312">
     <title></title>
  <style>
      .b_color{
          width: 200px;
          height: 200px;
          font-weight:bold;
          color:Black;
          border:1px solid #E5F5FF; 
          filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#f1fcc9', endColorStr='#5d7215', gradientType='0');  
          background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1fcc9), to(#5d7215));
          background:-moz-linear-gradient(top, #f1fcc9,#5d7215);
   }
  </style>
 </head>


 <body>
       <div class="b_color"></div>
 </body>
</html>

     例图:

© 著作权归作者所有

共有 人打赏支持
wdsjndtk
粉丝 0
博文 3
码字总数 1502
作品 0
昌平
css的线性渐变详解

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从...

筱飞
2016/12/21
14
0
CSS3.0新增属性

背景图片设定 background 默认图片重复 css允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 background-size规定背景图片的尺寸 background-size:cover 优先宽释放 高度根据宽度...

RanoB
2016/12/27
7
0
CSS3实现背景颜色线性渐变gradient

Mozilla 仅针对FireFox linear 表示线性,参数top表示从顶部开始,参数#eee表示开始颜色,#aaa表示结束颜色 效果: Webkit 解决:Chrome 、Safari linear 表示线性、0 0 表示开始位置的x与y...

cd_ing
2014/02/17
0
0
CSS3线性渐变

今天来谈谈CSS3中的线性渐变,有了这个,好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。 首先看看今天的主角: linear-gradient()。 它,实际上不是颜色,而是背景图...

璿而不华
2017/12/14
0
0
CSS渐变色效果的实现方法与效果演示

CSS渐变色(Gradients)也是一个类似的技术。现在火狐,谷歌浏览器,Safari,IE8+都支持这种技术,我们可以安全的在网站上使用它。下面我们来看看CSS渐变色(Gradients)技术基本的语法,浏览器支...

筱飞
2016/04/04
72
0

没有更多内容

加载失败,请刷新页面

加载更多

【mpvue】三

使用了快1个月,陆续整理发现的坑 1、pageA-pageB-pageA-pageC 如果以这种顺序,大概理解成,列表进详情B, 返回列表进入详情C,那么进入详情C的时候,会因为缓存,先展现详情B的内容。解决方...

登天的感觉
27分钟前
1
0
在EXCEL指定SHEET页,指定文字位置,插入批注

Java操作EXCEL文件,利用POI,在EXCEL指定SHEET页中指定文字位置处插入批注 package excel; import java.io.FileInputStream; import java.io.FileOutputStream; import org.apache.poi.hssf......

zhaochaochao
28分钟前
1
0
一些网站。

UI schema,可以用json定义UI表单:https://jsonforms.io/examples/array

王坤charlie
35分钟前
1
0
百万连接,百亿吞吐量服务的JVM性能调优实战

转载占小狼博客 应用:shark-新美大移动端网络优化(每日接受移动端请求约150亿) 应用特点 : qps比较高,新生代增长飞快 用户的连接需要维持一段时间 单机需要维持海量连接,几十万的级别 以...

BakerZhu
38分钟前
1
0
iOS涂色涂鸦效果、Swift仿喜马拉雅FM、抽屉转场动画、拖拽头像、标签选择器等源码

iOS精选源码 LeeTagView 标签选择控件 为您的用户显示界面添加美观的加载视图 Swift4: 可拖动头像,增加物理属性 Swift版抽屉效果,自定义转场动画管理器 Swift 仿写喜马拉雅FM 可能是最好用...

sunnyaigd
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部