文档章节

CSS3实现背景颜色渐变

wdsjndtk
 wdsjndtk
发布于 2015/12/02 15:36
字数 956
阅读 26
收藏 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
昌平
私信 提问
CSS3.0新增属性

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

RanoB
2016/12/27
7
0
个人总结(css3新特性)

1.前言 css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用...

守候i
2017/12/04
0
0
css3编写浏览器背景渐变背景色

css3编写浏览器背景渐变背景色 知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。 👇源码:...

急速奔跑中的蜗牛
2017/12/06
0
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

没有更多内容

加载失败,请刷新页面

加载更多

域名备案图文教程

摘要: 备案不易,且行且珍惜! 我买了个腾讯云的服务器,1核1G,打算用于部署个人网站kiwenlau.com。根据规定,在国内部署网站,是需要为域名备案的... 备案是通过腾讯云申请的,一切都很顺利...

Fundebug
2分钟前
0
0
怎么写出好的敏捷测试(Agile Tesing)策略文档

敏捷测试策略 在敏捷环境中,我们在短期冲刺或迭代中工作,每个sprint只关注一些需求或用户故事,因此文档在数量和内容方面可能不会那么广泛。 之前我们得出的结论是,由于时间限制,我们可能...

程序猿拿Q
3分钟前
0
0
Linux之《荒岛余生》(二)CPU篇

Linux之《荒岛余生》(二)CPU篇 温馨提示,动图已压缩,流量党放心查看。CPU方面内容不多,我们顺便学点命令。本篇是《荒岛余生》系列第二篇,垂直观测CPU。其余参见: Linux之《荒岛余生》...

小姐姐味道
6分钟前
0
0
DRDS SQL 审计与分析——全面洞察 SQL 之利器

背景 数据库存储着系统的核心数据,其安全方面的问题在传统环境中已经成为泄漏和被篡改的重要根源。而在云端,数据库所面临的威胁被进一步的放大。因此,对云数据库的操作行为尤其是全量 SQ...

阿里云云栖社区
8分钟前
2
0
JSONArray 排序

List<JSONObject> jsonArySort = new ArrayList<JSONObject>();    for (int i = 0; i < rtJsonArray.length(); i++) {    jsonArySort.add(rtJsonArray.getJSONObject(i));......

MoksMo
10分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部