Background-linear-gradient()详解

科技前沿 • 2025-02-05 13:21 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

一：一般渐变

未设置角度，则默认为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-linear-gradient()详解

一： 一般渐变

二： 块渐变

多块

补充2022.5.21

相关推荐

一：一般渐变

二：块渐变