线性渐变linear-gradient()

遇到了这样的css样式

body {
height: 100%;
background-color: #ffffff;
background-image: url(images/overlay.png), linear-gradient(60deg, rgba(30, 159, 255, 0.17) 5%, rgba(255, 108, 96, 0.27)), url(images/bg.jpg);
background-repeat: repeat, no-repeat, no-repeat;
background-size: 100px 100px, cover, cover;
background-position: top left, center center, bottom center;
background-attachment: fixed, fixed, fixed;
}

其中

 linear-gradient(60deg, rgba(30, 159, 255, 0.17) 5%, rgba(255, 108, 96, 0.27))

用角度值指定渐变的方向(或角度)。
to left:设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top:设置渐变从下到上。相当于: 0deg
to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。 指从左到右进行两个颜色的线性渐变。

CSS3———linear-gradient() 线性渐变的更多相关文章

  1. [转]ebkit内核浏览器的Linear Gradients (线性渐变)

    转自:http://www.css88.com/archives/tag/webkit-gradient webkit内核的safari. Chrome的Linear Gradients (线性渐变) ...

  2. 深入理解css3中的线性渐变

    css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...

  3. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

  4. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  5. gradient 线性渐变 浏览器兼容

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=white, endColorstr= ...

  6. 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  7. 深入理解CSS3 gradient斜向线性渐变——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...

  8. CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  9. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

  10. CSS3线性渐变linear-gradient

    转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...

随机推荐

  1. java 遍历list 模糊查询用

    java 遍历list 模糊查询用 /** * 筛选list * @param list 要筛选的list * @param key 筛选的key * @param <T> * @retu ...

  2. dedecms清空栏目后,新建ID不从1开始的解决方法

    在后台SQL运行器运行下面的语句,这样新建的栏目ID就从1开始了: ALTER TABLE `dede_arctype` AUTO_INCREMENT =1; (注意表名) 下面是文章的,运行后,发布 ...

  3. 03《UML大战需求分析》之三

    学习了活动图之后,我又学习了流程分析工具之二的状态机图.看上去状态机图和活动图很类似,我也很容易从活动图的角度来理解状态机图.但是学习之后,发现两种图是两种完全不同的分析角度.活动图在流程分析时是玩你 ...

  4. oc与swift比较

    swift试是用语言层面的雕虫小技和oc的机制大道进行pk. 从整体上来说,oc是一个更加优秀的语言.

  5. 洛谷1613 跑路 倍增 + Floyd

    首先,我们一定要认识到本题中的最短时间所对应的道路不一定是在起点到终点的最短路.例如,起点到终点的最短路为 151515 ,那么对 151515 进行二进制拆分的话是 111111111111 ,这时 ...

  6. 路飞学城Python-Day24

    12.粘包现象 客户端接收的信息指定了的字节,TCP协议没有丢失协议,只是只能接收指定的字节数,于是产生出了粘包现象 服务端接收命令只能接收1024字节,服务端执行命令结果以后传输给客户端,客户端再以 ...

  7. echarts的下载为excel小工具

    echarts自带有下载为图片的功能,但是没有下载为excel表格的功能,个人觉得下载为表格更为需要,所以写了个工具,此工具应用有局限性,只能用于柱形图和折线图,option的series要是如下形式 ...

  8. 查看Linux系统信息命令

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  9. code-reading-notes--libyang-1

    API struct lyd_node * lyd_parse_xml(struct ly_ctx *ctx, struct lyxml_elem **root, int options, ...) ...

  10. AMD包下载及使用

    AMD下载 下载地址 选择837.zip下载即可,将837.zib考入相应的文件夹下,并解压缩 wget http://netlib.org/toms/837.zip unzip 837.zip cd ...