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( [ ...
随机推荐
- Linux内核分析笔记
我在MOOC<Linux内核分析>的学习笔记,这里只做个索引! 计算机是如何工作的
- dedecms清空栏目后,新建ID不从1开始的解决方法
在后台SQL运行器运行下面的语句,这样新建的栏目ID就从1开始了: ALTER TABLE `dede_arctype` AUTO_INCREMENT =1; (注意表名) 下面是文章的,运行后,发布 ...
- 前端精选文摘:css之BFC 神奇背后的原理(转载)
一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...
- mySql 使用 SQL 文件脚本 failed to open file 注意事项
1.路径不要有中文,其实最好是全英文 2.路径可以有空格 3.路径两头不要加引号 4.作为一个MySQL命令,source C:/lib/a.sql; 后边的分号是要的. 5.使用 unix 路径风格 ...
- BZOJ 3524 [POI2014]KUR-Couriers (主席树)
题目大意:给你一个序列,求某个区间出现次数大于一半的数是什么 主席树裸题,刷刷水题提升自信= = #include <cstdio> #include <cstring> #i ...
- Redis:基础知识及其常用数据类型和关键字
Redis: Redis是什么: REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(Key-Value)分布式内存数 ...
- php获取时间是星期几
PHP星期几获取代码: date("l"); //data就可以获取英文的星期比如Sundaydate("w"); //这个可以获取数字星期比如123,注意0是 ...
- C# .net IDE Rider入门
话说史上最强IDE Visual Studio 所向披靡数十载尚无敌手,现在Intellij带着统一IDE界的目标来挑战VS的霸主地位.了解Rider后发现,哎哟亮点多多,还不错哦! Rider是一款 ...
- 洛谷 P1617 爱与愁的一千个伤心的理由
P1617 爱与愁的一千个伤心的理由 题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第二章. 经历了心痛后,爱与愁大神不行了. 题目描述 ...
- maven也是Apache开发的,也是java开发的。maven需要你本地系统JDK的支持
1. 3. 添加 M2_HOME 和 MAVEN_HOME 添加 M2_HOME 和 MAVEN_HOME 环境变量到 Windows 环境变量,并将其指向你的 Maven 文件夹. M2_HOME ...