CSS3———linear-gradient() 线性渐变
线性渐变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() 线性渐变的更多相关文章
- [转]ebkit内核浏览器的Linear Gradients (线性渐变)
转自:http://www.css88.com/archives/tag/webkit-gradient webkit内核的safari. Chrome的Linear Gradients (线性渐变) ...
- 深入理解css3中的线性渐变
css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...
- CSS3 Gradient线性渐变
废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...
- CSS3中颜色线性渐变实战
css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...
- gradient 线性渐变 浏览器兼容
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=white, endColorstr= ...
- 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- 深入理解CSS3 gradient斜向线性渐变——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- CSS3线性渐变linear-gradient
转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...
随机推荐
- css元素垂直居中方法
1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...
- UWP 读取XML文件
一.读取本地XML文件时要将xxx.xml文件的“生成操作”改为“嵌入的资源”会比较好,在手机上运行的话需要改为“内容” <?xml version="1.0" encodi ...
- 「JavaSE 重新出发」05.03.01 利用反射分析类
在 java.lang.reflect 包中有三个类 Field, Method 和 Constructor 分别用于描述类的域.方法和构造器. Class 类中的 getFields, getMet ...
- easyUI datagarid单元格动态合并
第二列根据第一列合并,第三列根据第二列合并.层级关系. /* * tableID表格的id * colList要合并的字段例如:"overcount,totalcount" */ ...
- BZOJ 1717 [USACO06DEC] Milk Patterns (后缀数组+二分)
题目大意:求可重叠的相同子串数量至少是K的子串最长长度 洛谷传送门 依然是后缀数组+二分,先用后缀数组处理出height 每次二分出一个长度x,然后去验证,在排序的后缀串集合里,有没有连续数量多于K个 ...
- [读书笔记] R语言实战 (十三) 广义线性模型
广义线性模型扩展了线性模型的框架,它包含了非正态的因变量分析 广义线性模型拟合形式: $$g(\mu_\lambda) = \beta_0 + \sum_{j=1}^m\beta_jX_j$$ $g( ...
- Mysql字段合并
现有数据 合并字段显示:利用GROUP_CONCAT(course,":","score") 严格区分大小写!GROUP_CONCAT 复制代码 SELECT ...
- 2019-03-15 Python time datetime 获取当下时间 和 格式化时间
import datetime start_date='2018-01-10' end_date='2019-01-10'# 转换为2018-01-10 00:00:00start_date=date ...
- https的基本原理,看完你的程序员女朋友再也不和你提分手了
[http风险] 首先,我们来讲一下平时上网的时候,存在的风险. 初步接触过网络的同学都知道,网络上是很不安全的,尤其是各种公共场合的免费WIFI,以及手机上各种免费上网的万能钥匙.这些不安全因素会导 ...
- 【【henuacm2016级暑期训练】动态规划专题 O】Robot Rapping Results Report
[链接] 我是链接,点我呀:) [题意] 让你确定一个最小的k 使得1..k这些比赛的结果能够推导出所有人之间的实力大小 [题解] 如果关系越多.那么就越能确定所有人之间的大小关系. (多一点也能唯一 ...