线性渐变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. 手游服务器端接入facebook的SDK

    手游如果支持facebook登录,就要接入facebook的登录SDK.刚好工作中自己做了这一块的接入功能现在记录分享下来提供一个参考. 当前只是接入了登录这个功能,先简单的说说接入facebook登 ...

  2. Springboot统一异常处理(@ControllerAdvice)

    import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind ...

  3. BZOJ 3527: [Zjoi2014]力 FFT_卷积

    Code: #include <cmath> #include <cctype> #include <cstdio> #include <cstring> ...

  4. 进程线程之pid,tid

    Linux中,每个进程有一个pid,类型pid_t,由getpid()取得.Linux下的POSIX线程也有一个id,类型pthread_t,由pthread_self()取得,该id由线程维护,其i ...

  5. js单体内置对象

    js单体内置对象:js的内置对象,是ECMAScritp提供的.不依赖于宿主环境的对象,我的理解就是在我们开发之前js里面就已经存在的对象.单体内置对象就是是不需要通过new来实例化的,例如我们的st ...

  6. 如何设置,获取,删除cookie?

    cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 1.不同的浏览器存放的cookie位置不一样,也是不能通用的 2.cookie的存储 ...

  7. CentOS安装记录

    决定开始复习Linux系统编程,这次我不再折腾Linux下的各种工具,直接使用VS2017进行代码编写与调试. 配置项 值 VM VMware® Workstation 15 Pro OS CentO ...

  8. ElasticSearch启动报错,bootstrap checks failed

    修改elasticsearch.yml配置文件,允许外网访问. vim config/elasticsearch.yml# 增加 network.host: 0.0.0.0 启动失败,检查没有通过,报 ...

  9. 简述Vue的响应式原理

    当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化.每个组 ...

  10. css预编译器——Less的使用

      方法一:仅介绍在客户端环境下使用的方法 1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less": &l ...