文档章节

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
昌平
私信 提问
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新特性)

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

没有更多内容

加载失败,请刷新页面

加载更多

Linux 权限

权限 0 000 --- 无权限 1 001 --x 执行权限 2 010 -w- 写权限 3 011 -wx 写和执行 4 100 r-- 读权限 5 101 r-x 读和执行 6 110 rw- 读和写 7 111 rwx 读写执行 755 : rwxr-xr-x 660 : rw-r...

忙碌的小蜜蜂
20分钟前
0
0
21分钟教会你分析MaxCompute账单

21分钟教会你分析MaxCompute账单 背景 阿里云大计算服务MaxCompute是一款商业化的大数据分析平台,其计算资源有预付费和后付费两种计费方式。并且产品每天按照project为维度进行计量计费(账...

阿里云云栖社区
23分钟前
0
0
Docker使用 linuxserver/letsencrypt 生成SSL证书最全解析及实践

本文使用 HTTP 和 DNS 两种校验方式对 Docker 下 linuxserver/letsencrypt 项目进行了实践。生成SpringBoot可用证书,使用 Nginx 的 htpasswd 来对网站进行密码保护,并测试使用 fail2ban 防...

java菜分享
24分钟前
0
0
代码吃鸡:Python-Robocode

最近看到一个很有“未来感”的新闻: 一辆特斯拉在拉斯维加斯出了车祸,撞“死”了一个……emmmm……机器人。不知道是意外还是炒作,又或者是这位机器人故意碰瓷,反正人们也无法从受害者口中...

crossin
28分钟前
0
0
什么是公网IP、内网IP和NAT转换?

搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1、引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网I...

Linux就该这么学
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部