CSS3实现背景颜色渐变
博客专区 > wdsjndtk 的博客 > 博客详情
CSS3实现背景颜色渐变
wdsjndtk 发表于2年前
CSS3实现背景颜色渐变
  • 发表于 2年前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

   基本语法:

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>

     例图:

共有 人打赏支持
粉丝 0
博文 3
码字总数 1502
×
wdsjndtk
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: