Linear-gradient()

Linear-gradient()

定义与参数

  • linear-gradient() 函数创建一副图像,这副图像在 2 个或多个颜色之间沿着直线渐进式过渡。

    • 是不是好像懂了?先看一段代码。生成的图像从红色 - 绿色 - 蓝色 - 黄色,变化的方向从上到下。四个颜色的位置分别在 0%,33.3%,66.7%,100% 处。
    •   background: linear-gradient(red, green, blue, yellow);
      
    • 在这里插入图片描述
  • 那我们看看这个函数的参数就只是很多颜色吗?

    • 边或角:这个参数指定了颜色渐变线开始点的位置。(开始点会在后面说)
      • 如果参数是,包含两个关键词,且关键词以 to 开始。
        • 若指定颜色在水平方向变化,即 leftright
        • 若指定颜色在垂直方向变化,即 topbottom
        • 参数的值可以是 to topto bottomto leftto right,换算成角度分别对应 0deg180deg270deg90deg。或者 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%);
          
        • 在这里插入图片描述
        • 每个颜色后面都有两个百分比参数,分别表示颜色开始的位置,和结束的位置。要保证颜色重合,只需后面颜色的开始位置在前面颜色结束位置之前。
    • 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() 画了很多很多有颜色的线与轴垂直,每条线的颜色就是这条线与轴相交的点的颜色。
    • 图片来自官网图片来自mozilla官网
    • 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 及其之前的版本不支持,为什么会这样请在评论区指教。

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数: gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点: 完后运行,r gdb 中的有用命令 下面是一个有用的 gdb 命令子集,按可能需要的顺序大致列出。 第一列给出了命令,可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布: 一元高斯分布:(将多元高斯分布中的D取值1) 其中代表的是平均值,是方差的平方,也可以用来表示,是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要,需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容,经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch ,简称ES 。是一个全文搜索服务器,也可以作为NoSQL 数据库,存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项: (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候,访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议:以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么? 在java规范中是这样描述的:Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联,线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口,远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统: 微信小程序——辩论管理前台涉及技术:WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能,出了大概一年了。 程序员们在编程时遇到不会的问题,又没有老师可以提问,就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法,但是不一定得到回复,…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎,题目很狗,第一次踩这个坑,单拉出来写个题解记录一下 题意:给一个数字矩阵,一次操作:对于每一行,可以去掉左端或者右端的数,得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1)全特化2)偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类: 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…