关于css3中linear-gradient中的百分比

darryrzhong 发布于2019-08-30 15:53 / 3374人阅读

摘要：第一个颜色的实色占了总高度的，第二个颜色的实色也占了总高度的，而渐变的过度则占了总高度的。默认的渐变方式为从上往下，所以当某个颜色值设置了百分比后，便会从距离顶端相关的距离百分比计算开始填充实色。而渐变色会在顶部与尾部的中间填充。

相关阅读点

《Css secret》第二章《背景与边框》第五节《条纹背景》

正文

在第二章《背景与边框》中第五节《条纹背景》中，谈到了css3的新属性值linear-gradient,但是这里并不是详细说明这个新属性的用法，这里主要是用它来完成背景条纹，来看看原文中的说明与演示。

假设我们有一条基本的垂直线性渐变，颜色从#fb3 过渡到#58a（参见图2-20）：
background: linear-gradient(#fb3, #58a);

抛除兼容性前缀，linear-gradient 最简单的声明就是如上代码，接受两个颜色值参数，默认就是垂直渐变的。再来看如下原文：

现在，让我们试着把这两个色标拉近一点（参见图2-21）：

background: linear-gradient(#fb3 20%, #58a 80%);

现在可以看到，在颜色值后面跟多一个对应的百分比值，虚线框中的渐变过渡被压缩了。第一个颜色的实色占了总高度的20%，第二个颜色的实色也占了总高度的20%，而渐变的过度则占了总高度的60%。当看到这里的时候我很好奇也很疑惑，为什么代码中并没有设置一个60%的值而为什么结果会有一个相同的值，书中也没有多说。说到底就是对这个属性的不熟悉，我翻阅mdn上面的文档，找到了这么一句：

linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% and finishing red */

从注释中可以清楚地知道，百分比是指某个颜色值距离起点的开始位置 。默认的渐变方式为从上往下，所以当某个颜色值设置了百分比后，便会从距离顶端相关的距离（百分比计算）开始填充实色。而渐变色会在顶部与尾部的中间填充。我们可以自己来验证相关的例子：

第一个我没有设置任何的百分比

    background:linear-gradient(
        red,
        orange
    );

得到的效果是这样的：

由于这个看不出默认的百分比是多少，所以接下来设置了

    background:linear-gradient(
        red 0%,
        orange 100%
    );

结果发现

效果跟上图并没有区别，所以如果我们不设置百分比的话，默认是根据颜色的个数来给每个颜色值设置的，最后一个颜色的百分比值就是100%，而起始的值就是0%，中间如果再有多个颜色值，则根据100/（个数-1）平均下去。相同的我们可以设置多个值例如

    background:linear-gradient(
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );

    background:linear-gradient(
        red 0%,
        orange 16.67%,
        yellow 33.33%,
        green 50.00%,
        blue 66.67%,
        indigo 83.33%,
        violet 100%
    );

上面这两个代码效果都是一致的

说了这么多，只知道了默认值，还不知道到底百分比是怎么工作的呢。那现在就再来写例子

首先来定义一个颜色值全部都为0的

     background:linear-gradient(
        red 0%,
        orange 0%
    );

得到如下效果

还不能看出是什么原因导致的，接下来再设置一个0% 20%的

    background:linear-gradient(
        red 0%,
        orange 20%
    );

再设置一个0% 50%的

    background:linear-gradient(
        red 0%,
        orange 50%
    );

由此不难看出，红色部分是从顶端就开始着色的，而橙色部分是从设置的距离顶部的百分比位置开始着色，但把橙色设置为0%的时候，便会直接从顶部开始着色，就有了橙色完全遮盖住红色的效果，当橙色百分比值增加的时候，相应的就会产生一个距离，而这个距离的空间在一开始已经被红色着色了，所以才会有了后面的效果。

ps：如果设置第一个颜色的值呢？

我们来设置一下第一个颜色的百分比

    background:linear-gradient(
        red 30%,
        orange 50%
    );

知道了百分比值的作用，再来看看什么情况下才会产生渐变的过度效果：我们已经知道，当默认不设置百分比的时候，是这样的

![未设置百分比](http://upload-images.jianshu....
)
将红色设置0% 橙色50%后是这样的

我们再进行修改，将红色改为30% 橙色70%看看效果

    background:linear-gradient(
        red 30%,
        orange 70%
    );

所以上面的图中可以仔细看出，过度也是有个空间占比的，默认（红色0%，橙色100%）的渐变过渡占比为

红色0% 橙色50%的渐变过渡占比为

红色30% 橙色70%的渐变过渡占比为

所得得出结论，渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。

我们可以通过设置两个占比各为50%的颜色，看看渐变过渡区是否还存在

    background:linear-gradient(
        red 50%,
        orange 50%
    );

PS：如果后一个颜色的百分比设置为比前一个颜色的百分比小呢，又代表什么意思？
下面摘抄自原文

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

所以我们可以知道，如果前面有比当前的颜色值百分比大的，会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值，下面的效果我们就可以知道了

    background:linear-gradient(
        red 50%,
        orange 40%
    );

其实就相当于

    background:linear-gradient(
        red 50%,
        orange 50%
    );

根据上面全部所说的，自己简简单单就能通过一个属性做出一个多重颜色线条的背景

     background:linear-gradient(
        red 0%,
        red 14.3%,
        orange 0,
        orange 28.6%,
        yellow 0,
        yellow 42.9%,
        green 0,
        green 57.2%,
        blue 0,
        blue 71.5%,
        indigo 0,
        indigo 85.8%,
        violet 0,
        violet 100%
    );

ps：解释一下，总共用了7种颜色。第一个颜色为red，此时整个背景已经由red覆盖，在这里为什么颜色都要设置两次，这是因为每个颜色需要一个起始着色点，然后还需要将两个颜色之间的渐变过渡区域覆盖为实色，消除过度效果。可以想象当没有了实色的覆盖，最终效果会是这样的

    background:linear-gradient(
        red 0%,
        orange 16.67%,
        yellow 33.33%,
        green 50%,
        blue 66.67%,
        indigo 83.33%,
        violet 100%
    );

混合云超融合服务器 js中的乘百分之百深度学习中的 jsp中引号中的引号云计算中的云

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116637.html

小探究：CSSの渐变

摘要：渐变范围颜色范围整个的宽度是，是，可以发现它截止的地方正好是，但是的渐变终点是。渐变过渡区的占比为总的空间高度或宽度减去上下两个着色块空间占比剩下的空间。因为我不喜欢背公式，希望自己能找到比较容易理解和推理的记忆方式吧，很早就感觉CSS3渐变的属性组成不太好记忆，所以今天终于挖了这个坑，其实也没什么很特别的，嘻嘻，如果有错误欢迎提出。基本用法我们一般都是在添加background...

LiuRhoRamen 2019-08-29 15:04 评论0 收藏0
[实践总结]纯css实现动态边框

摘要：另外一种实现思路是添加四个来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。背景这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);动态边框思路看到这个效果，我首先想...

BlackHole1 2019-05-23 16:28 评论0 收藏0
CSS背景与边框

摘要：背景与边框半透明边框背景知识颜色在里我们可以使用和两种色彩模式，二者均可以用来在设置颜色的同时指定其它透明度。解决方案需要知道的是，在默认情况下，背景会延伸到边框所在区域的下层。 title: 背景与边框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明边框背景知识 RGBA/HSLA 颜色在CSS3里我们可以使用RGBA和...

wanghui 2019-08-30 13:15 评论0 收藏0
CSS中Background浅析

摘要：如果只指定其中一个值，另一个值会被设定为因此可以和混用。通过设定负的，背景图像的一部分被拖拽到父元素之外，从而在父元素之内显示要显示的内容。随着的普及，相信渐变将成为主流。可以显示的显示范围。作为一个有理想有包袱的页面仔，正像鑫哥在这篇文章说说CSS学习中的瓶颈(强烈推荐)里说的其实，广大页面屌丝们并不畏惧那些学习能力强的人，畏惧的是那些学习能力强，同时，尼玛学习又拼命的人。页面仔...

objc94 2019-08-30 13:03 评论0 收藏0
CSS3新特性的概述

摘要：的新特性大致分为以下六类选择器边框与圆角背景与渐变过渡变换动画下面分别说一说以上六类都有哪些内容选择器基本选择器基本选择器又分为子选择器相邻兄弟选择器通用兄弟选择器群组选择器属性选择器为带有属性的元素设置样式为属性的元素设置样式选择属性值包 CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 ...

马龙驹 2019-08-05 11:57 评论0 收藏0