Linear-gradient()
Linear-gradient()
定义与参数
linear-gradient()
函数创建一副图像,这副图像在 2 个或多个颜色之间沿着直线渐进式过渡。- 是不是好像懂了?先看一段代码。生成的图像从红色 - 绿色 - 蓝色 - 黄色,变化的方向从上到下。四个颜色的位置分别在 0%,33.3%,66.7%,100% 处。
background: linear-gradient(red, green, blue, yellow);
那我们看看这个函数的参数就只是很多颜色吗?
边或角
:这个参数指定了颜色渐变线开始点
的位置。(开始点会在后面说)- 如果参数是
边
,包含两个关键词,且关键词以to
开始。- 若指定颜色在水平方向变化,即
left
或right
- 若指定颜色在垂直方向变化,即
top
或bottom
- 参数的值可以是
to top
,to bottom
,to left
,to right
,换算成角度分别对应0deg
,180deg
,270deg
,90deg
。或者to bottom right
(右下),to top left
(左上) 等
- 若指定颜色在水平方向变化,即
- 如果参数是
角
,直接写角度即可,记得带单位,如45deg
。- 角度更加灵活,因为使用边只能指定颜色在水平或垂直方向变化。
- 度数和单位之间不能有空格!
- 度数可以是负数。
- 度数顺时针增大。
- 如果参数是
color stop
: 由一个颜色值组成,并且后面跟着 1 或 2 个可选的终点位置。这个位置可以百分比值,也可以是沿着渐变轴的长度值。- 例1
- 我们将上图的绿色的位置调整为 50%,蓝色的位置调整为 75%
background: linear-gradient(red, green 50%, blue 75%, yellow);
- 稍微解释这幅图,颜色的变化从红色开始,在图高度的 50% 转变成绿色,在图高度的 75% 转变成蓝色,最终在 100% 结束于黄色。
- 例2
- 如果我们指定的数值错误会发生什么情况?
background: linear-gradient(red, green 50%, blue 75%, yellow 60%);
- 糟糕,蓝色和黄色之间没有过渡,因为代码的逻辑是蓝色应该在 60% 的地方过渡为黄色,黄色和蓝色范围有了重合,按照官方文档的说法,在重合的颜色之间会有硬过渡。
Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition
- 如果按照这个错误的做法下去,我们甚至可以画出一幅彩虹,想想怎么做?猜对了,只需要相邻两个颜色在范围重合!
background: linear-gradient(red 0% 15%, orange 10% 30%, yellow 20% 45%, green 10% 60%, blue 45% 75%,cyan 60% 87%, purple 60% 100%);
- 每个颜色后面都有两个百分比参数,分别表示颜色开始的位置,和结束的位置。要保证颜色重合,只需后面颜色的开始位置在前面颜色结束位置之前。
- 例1
color hint
: 第三个参数按字面意思翻译就是颜色暗示
。这是一个插值暗示,定义了相邻两个颜色 (color-stop
) 之间如果过渡。这个参数是长度值,确定了两个颜色长度中哪一点应该是颜色变化的中点。如果忽略,默认两个颜色长度的中点是颜色变化的中点。background: linear-gradient(red, blue);background: linear-gradient(red, 20%, blue);
- 同样,我们试一下给出的参数异常,会出现什么情况?
background: linear-gradient(red, -20%, blue); // 蓝色background: linear-gradient(red, 120%, blue); // 红色
组成
- 一个
linear-gradient()
是由一个轴
( 颜色渐变线 ) 和 2 个或多个color-stop
组成的。在这个轴上的每一个点都是不同的颜色。为了使颜色渐变平滑,linear-gradient()
画了很多很多有颜色的线与轴垂直,每条线的颜色就是这条线与轴相交的点的颜色。- 图片来自官网
gradient line
由渐变图像所在 box 的中点和一个角色决定。渐变的颜色由开始点和结束点以及中间的color stop
决定。开始点
是gradient line
上第一个颜色开始的位置。结束点
是gradient line
最后一个颜色结束的位置。这两个点在与gradient line
垂直且经过 box 的顶点的直线的垂足处。结束点
可以看作开始点
关于 box 中点的镜像点。稍显复杂的定义却带来一个有意思的现象:即与开始点最近的顶点的颜色和开始点相同。结束点同理。下图中,box 左上角的顶点与开始点
颜色相同,因为这两个点在同一条垂直于gradient line
的直线上。
浏览器兼容性
.bcg-gradient {height: 300px;width: 200px;/* opera */background: -o-linear-gradient(to top, orange, skyblue);/* firefox */background: -moz-linear-gradient(to top, orange, skyblue);/* safari */background: -webkit-linear-gradient(to top, orange, skyblue);background: linear-gradient(to top, orange, skyblue);}
- 在我的电脑上,IE 9 及其之前的版本不支持
linear-gradient
函数,菜鸟教程 说 IE 8 及其之前的版本不支持,为什么会这样请在评论区指教。
Linear-gradient()相关推荐
- CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章 这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
- 16.SVG线性渐变(Linear Gradient)
SVG 渐变 和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...
- ***CSS3 Gradient渐变色(转:http://www.w3cplus.com/content/css3-gradient)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用CSS3 Gradi ...
- 重构之美-浴火重生的火凤凰CSS3【前传:Gradient】
叮叮叮,铛铛铛,上课了上课了,同学们挨个坐好,爆老师要点名啦! 额,在上课之前先说一下,本套课程所有图例或示例包括以后涉及到的动画,我都将使用CSS3来设计,不采用一张图片,所以请使用Chrome浏览 ...
- 【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变 二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
- android开发步步为营之90:android图片处理技术之三(Gradient渐变图片的绘制)
我想大家在开发的时候,经常会看到UED会设计渐变颜色的产品需求,当然如果图片不需要动态更换,直接使用UED设计的渐变色的图片就可以了,但是很多时候,像我们最近项目里面,就有根据不同的皮肤,渐变色是不一 ...
- css 颜色渐变 Gradient
原文:http://www.w3cplus.com/content/css3-gradient CSS3 Gradient 作者:大漠 日期:2011-04-21 点击:35374 gradient ...
- 第52章,bitmap图像处理(从零开始学android),第52章、Bitmap图像处理(从零开始学Android)...
1.Drawable → Bitmap public static Bitmap drawableToBitmap(Drawable drawable) { Bitmap bitmap = Bitma ...
- LabVIEW图像增强算法(基础篇—5)
目录 1.空间域图像增强算法 1.1.线性卷积 1.1.1.一维卷积 1.1.2.二维卷积 1.2.领域增强 1.2.1.线性滤波 1.2.2.非线性滤波 2.频率域图像增强算法 2.1.傅里叶变换算 ...
- python 灰度图像_python库skimage 给灰度图像染色
灰度图像染成红色和黄色 # 1.将灰度图像转换为RGB图像 image = color.gray2rgb(grayscale_image) # 2.保留红色分量和黄色分量 red_multiplier ...
最新文章
- MySQL的主从服务器配置
- linux回到初始的命令,Linux基础总结简单常用命令
- linux如何更改服务器时间格式,Linux中date命令,格式化输出,时间设置
- Flink Checkpoint 机制:如何保证 barrier 和数据之间不乱序?
- 打印图片的属性和实现另存图片功能以及使用numpy
- java8 按条件过滤集合
- 在保存Bitmap的时候出现“GDI出现一般性错误”
- kali64位下载怎么是AMD_电脑达人速更 NVIDIA 显卡和 AMD 显卡驱动程序又双叒叕更新啦!...
- Jenkins实现自动打包Android(安卓)程序
- 【工业互联网】自适应的工业生态系统
- Itextpdf5 基础知识
- Hexo+Github搭建博客总结
- 语法树的Java代码自动化插桩
- 转:java 中文繁简体转换工具 opencc4j
- 2018全球机器学习技术大会议程抢鲜看!
- 05-SA8155 QNX I2C框架及代码分析
- 测试用例具体的设计方法
- Grafana面板(panel):从数据源请求数据
- 题解 CF38C 【Blinds】
- ros2 foxy 安装gazebo11.0