线性渐变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. 从Dinnr失败看产品市场可行性认知有哪些不足

    对所有互联网创始人来说,在实际创业之前「验证idea的市场可行性」是至关重要的事情,许多人会用访谈的方式询问潜在顾客的意见,本期的就已Dinnr为案例,当初用户访谈结果乐观,实际上线后却无人买单,创办 ...

  2. 工作流Activiti学习地址

    http://blog.csdn.net/xnf1991/article/details/52610277

  3. Pyhton学习——Day48

    # 转载:http://www.cnblogs.com/yuanchenqi/articles/6437362.html#python关于mysql的API--pymysql模块# 执行sql语句# ...

  4. Pyhton学习——Day11

    # Python中的内部模块# 函数学习的意义:抽取重复代码# 模块:不用重复写,模块及py文件,提高了代码的可维护性,其次,编写代码不必从零开始,当一个模块编写完毕,不必再重复编写# import ...

  5. jq——html,text,val和对象访问

    html代码 1.html():获取的是对象内的html代码,类似于innerHTML 2.html(代码):设置html的内容,替换 $("div").html("hh ...

  6. 亲历:IT 从业者避免猝死攻略 v1.0

    作者:香蕉痞 出处:http://www.geekpark.net/read/view/191188?u=0 亲历:IT 从业者避免猝死攻略 v1.0 By 香蕉痞 | 2013/10/28 [核心提 ...

  7. HDU 1222 Wolf and Rabbit( 简单拓欧 )

    链接:传送门 题意:狼抓兔子,狼从 0 出发沿逆时针寻找兔子,每走一步的距离为 m ,所有洞窟的编号为 0 - n-1 ,问是否存在一个洞窟使得兔子能够安全躲过无数次狼的搜捕. 思路:简单的拓展欧几里 ...

  8. oracle数据库安装教程以及问题和解决方法

    一,oracle数据库的下载和安装 1,在oracle官网上下载oracle安装包,运行setup.exe. 2,点击取消“我希望同构My Oracle Support接受安全更新”,以防后患. 3, ...

  9. Unity图集分割

    using System.IO;using UnityEngine;using UnityEditor; public class TestSaveSprite{ [MenuItem("LL ...

  10. SELECT使用子查询

    SELECT使用子查询   SELECT使用子查询,该子查询会执行多次,  次数是由记录数量决定.效率比较低,不推荐使用.  //查询部门编号,工资大于等于2000的人数,  //工资小于2000的人 ...