本文作者:DurkBlue

详细介绍一下Background:linear-gradient()的相关用法推荐

详细介绍一下Background:linear-gradient()的相关用法摘要: 一: 一般渐变未设置角度,则默认为180deg(从上到下)设置了角度,则0deg为竖直向上,然后顺时针旋转上图!二: 块渐变.aq1{   &nb...

一: 一般渐变

未设置角度,则默认为180deg(从上到下)

设置了角度,则0deg为竖直向上,然后顺时针旋转

上图!

详细介绍一下Background:linear-gradient()的相关用法  第1张


二: 块渐变

.aq1{
        background-image: linear-gradient(45deg,#87f 60%,#f78 60%);
    }
    .aq2{
        background-image: linear-gradient(90deg,#87f 60%,#f78 60%);
    }
    .aq3{
        background-image: linear-gradient(90deg,#87f 40%,#f78 60%);
    }
    .aq4{
        background-image: linear-gradient(110deg,#87f 33%,#f78 33%,#f78 66%,#d1d1d1 66%);
    }


注意aq124和aq3的区别,如果比例之间有空隙则会形成渐变来过渡,如果同一比例有两种颜色则不会形成渐变。

详细介绍一下Background:linear-gradient()的相关用法  第2张


多块

代码:


    .aq5{
        width: 500px;
        height: 200px;
        background-image: linear-gradient(100deg,red 30%,transparent 30%),
        linear-gradient(60deg,yellow 25%,yellow 60%,transparent 60%),
        linear-gradient(150deg, transparent 20%,green 20%);
    }


效果

详细介绍一下Background:linear-gradient()的相关用法  第3张

为了处理留白问题,所以设置了重叠部分,即后面的百分比小于前面的


测试demo


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    body,.one,.two,.three{
        display: flex;
        flex-wrap: wrap;
    }
    .a{
        width: 100%;
    }
    .a *{
        height: 100px;
        width: 10%;
    }
    .anull{
        background-image: linear-gradient(#78f, #f78);
    }
    .a0{
        background-image: linear-gradient(0deg,#78f, #f78);
    }
    .a45{
        background-image: linear-gradient(45deg,#78f, #f78);
    }
    .a90{
        background-image: linear-gradient(90deg,#78f, #f78);
    }
    .a180{
        background-image: linear-gradient(180deg,#78f, #f78);
    }
    .a270{
        background-image: linear-gradient(270deg,#78f, #f78);
    }
    .aq1{
        background-image: linear-gradient(45deg,#87f 60%,#f78 60%);
    }
    .aq2{
        background-image: linear-gradient(90deg,#87f 60%,#f78 60%);
    }
    .aq3{
        background-image: linear-gradient(90deg,#87f 40%,#f78 60%);
    }
    .aq4{
        background-image: linear-gradient(110deg,#87f 33%,#f78 33%,#f78 66%,#d1d1d1 66%);
    }
    #div3{
    background:linear-gradient(250deg,#a0a 30%,rgba(0,0,0,0) 30%),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
    background-size:cover;
    /* background-position:top left; */
    } 
    </style>
</head>
<body>
    <div class="one a">
        不设置直角度<div></div>
        0<div></div>
        45<div></div>
        90<div></div>
        180<div></div>
        270<div></div>
    </div>
    <div class="two a">
        45<div></div>
        90<div></div>
        90<div></div>
        110<div></div>
    </div>
    <div class="three a">
        <div id="div3"></div>
    </div>
</body>
</html>


效果:

详细介绍一下Background:linear-gradient()的相关用法  第4张

注意最后一个例子一定要设置透明(不一定要一个比例的位置有两种颜色,可有空隙形成渐变,可见下图),因为至少要有两个颜色

详细介绍一下Background:linear-gradient()的相关用法  第5张

background-image: linear-gradient(to bottom, white 0%, red 50%, #000 100%);

详细介绍一下Background:linear-gradient()的相关用法  第6张

0%处:纯白

50%处:纯红

100%处:纯黑


详细介绍一下Background:linear-gradient()的相关用法  第7张

设置颜色,其实是设置颜色点。下面这句和上面那句等效

background-image: linear-gradient(to bottom, /* rgb(86, 71, 117) */white, red, #000);


三个颜色点,则有两个均等的过度块,将100vh分为2个均等的过度块,则系统默认将颜色点的位置设为0%,50%,100%

此篇短文由DurkBlue发布,写作不易转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 06-13
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,483人围观)参与讨论

还没有评论,来说两句吧...