Background:linear-gradient()详解

小白白中之白

已于 2022-05-21 12:28:29 修改

阅读量3w

点赞数 25

分类专栏：网页笔记文章标签： css3 css html

于 2021-07-21 22:46:09 首次发布

本文链接：https://blog.csdn.net/m0_53438035/article/details/118972452

版权

网页笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一：一般渐变

未设置角度，则默认为180deg（从上到下）
设置了角度，则0deg为竖直向上，然后顺时针旋转

上图！
在这里插入图片描述

二：块渐变

.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的区别，如果比例之间有空隙则会形成渐变来过渡，如果同一比例有两种颜色则不会形成渐变。
在这里插入图片描述

多块

代码:

    .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%);
    }

效果
在这里插入图片描述
为了处理留白问题，所以设置了重叠部分，即后面的百分比小于前面的

测试demo

<!DOCTYPE html>
<html lang="en">
<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 class="anull"></div>
        0<div class="a0"></div>
        45<div class="a45"></div>
        90<div class="a90"></div>
        180<div class="a180"></div>
        270<div class="a270"></div>
    </div>
    <div class="two a">
        45<div class="aq1"></div>
        90<div class="aq2"></div>
        90<div class="aq3"></div>
        110<div class="aq4"></div>
    </div>
    <div class="three a">
        <div id="div3"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
注意最后一个例子一定要设置透明（不一定要一个比例的位置有两种颜色，可有空隙形成渐变，可见下图），因为至少要有两个颜色

补充2022.5.21

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

在这里插入图片描述
0%处：纯白
50%处：纯红
100%处：纯黑

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

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

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

小白白中之白

关注

25
点赞
踩
74

收藏

觉得还不错? 一键收藏
1
评论
Background:linear-gradient()详解

一般渐变未设置角度，则默认为180deg（从上到下）设置了角度，则0deg为竖直向上，然后顺时针旋转上图！块渐变.aq1{ background-image: linear-gradient(45deg,#87f 60%,#f78 60%); } .aq2{ background-image: linear-gradient(90deg,#87f 60%,#f78 60%); } .aq3{ background
复制链接

扫一扫