文档章节

CSS3实现背景颜色渐变

wdsjndtk
 wdsjndtk
发布于 2015/12/02 15:36
字数 956
阅读 20
收藏 0
点赞 0
评论 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
个人总结(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中的 Background:linear-gradient()用法

本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章 这篇文章主要通过几个例子看看的具体用法对的基础知识不做过多的介绍如有兴趣的同学可以出门左拐到mdn查看具体用...

alixwang
2017/04/19
0
0
【分享】翻出过去的一个多彩泡泡屏保特效(JS+CSS版)

  整理文件时翻出一个好久前做的泡泡屏保的特效,纯JS+CSS做的。回想了下,是去年年初时看见XP下那个流行的泡泡屏保,突然想移植到JS版本来。但有做着才发现有不少麻烦的问题解决不好,于是...

暗之幻影
2014/12/25
0
0
css3 背景渐变

本来想先瞎扯些什么,然后又不知道讲什么的好,那就直接进入正题吧。 参考资料: Using CSS gradients (以及该页面内的大部分链接页面的资料) 首先区分下,平常给的纯色background,指的是b...

_野兽
2016/06/13
30
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

pbgo: 基于Protobuf的迷你RPC/REST框架

https://www.oschina.net/p/pbgo

chai2010
35分钟前
0
0
rsync工具介绍、常用选项以及通过ssh同步

linux下的文件同步工具 rsync rsync是非常实用的一个同步工具,可以从a机器到b机器传输一个文件,也可以备份数据,系统默认没有这个工具,要使用命令 yum install -y rsync 安装。 rsync的命...

黄昏残影
50分钟前
0
0
OSChina 周四乱弹 —— 表妹要嫁人 舅妈叮嘱……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @哈哈哈哈哈嗝:一定要听——The Pancakes的单曲《咁咁咁》 《咁咁咁》- The Pancakes 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :...

小小编辑
今天
245
4
流利阅读笔记30-20180719待学习

重磅:让人类得老年痴呆的竟是它? Lala 2018-07-19 1.今日导读 去年奥斯卡最佳动画长片《寻梦环游记》里有一句经典台词:“比死亡更可怕的,是遗忘”。在电影中,年迈的曾祖母会重复说一样的...

aibinxiao
今天
3
0
1.16 Linux机器相互登录

Linux机器之间以密码方式互相登录 运行命令#ssh [ip address],标准命令:#ssh [username]@ip, 如果没有写用户名,则默认为系统当前登录的用户 命令#w查看系统负载,可查看到连接到该主机的...

小丑鱼00
今天
0
0
about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
2
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
1
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部