线性渐变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. Controller总结

    下图显示了组建之间的基本控制流程 1.1控制器工厂.动作调用器 控制器工厂负责创建对请求进行服务的控制器实例 动作调用其负责查找并调用控制器类中的动作方法. 1.2自定义控制器工厂 namespace ...

  2. Windows平台下如何使用node.js显示系统盘符

    本文地址: http://www.cnblogs.com/blackmanba/articles/windows-nodejs-show-system-letter.html或者http://fork ...

  3. zeromq-4.1.2在windows下的编译

    作者:朱金灿 来源:http://blog.csdn.net/clever101 zeromq是一个最近比较火的跨平台消息中间件,最近准备研究它,故下载它的源码编译了一下.我是使用VS2008编译的, ...

  4. 利用PBFunc在Powerbuilder中进行图片格式转换

    利用PBFunc的n_pbfunc_image对象可以方便的进行图片格式的转换与大小转换 支持相互转换的格式有以下几种: FORMAT_BMP //bmp格式FORMAT_GIF  //gif格式FO ...

  5. Git 版本控制原理

    git 工作原理图 如上图所示,有三个区域Working Directory.stage.master. 名词解释: 工作区(Working Directory) 在我们直接编辑文件(文件夹)的根目录 ...

  6. TCP/IP 三次握手和HTTP过程

    0 引言 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. 1 T ...

  7. ESM定义模块部分export用法

    //定义一个函数和变量 fonction myFunc(){}; const My_CONST=''; export {My_CONST AS THE_COMST,myFunc as THE_FUNC ...

  8. Java 应用运维

    作者:http://blogread.cn/it/article/4918?f=wb 出处:http://blogread.cn/it/article/4918?f=wb Java应用运维    出处 ...

  9. 小程序全局状态管理,在页面中获取globalData和使用globalSetData

    GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...

  10. vue自定义一个过滤器

    vue如何自定义一个过滤器 html代码: <div id="app"> <input type="text" v-model="m ...