background-image: linear-gradient(to top, red, transparent 80%)中的各参数解释

话不多说直接看例子

<template>
  <div>
    <div class="box">div>
    <div class="box2">div>
    <div class="box1">div>
  div>
template>

<script setup>

script>

<style lang="less" scoped>
.box{
  width: 500px;
  height: 200px;
  background-image: linear-gradient(to top, red, transparent  80%);
  // 意思是颜色从底部到顶部 从红色(100%红)开始到透明色(跟白色差不多因为底色是白色，所以透明了就还是白色)
  // 红色是从底部位置0开始的到盒子高度的80%这个期间是过度到透明色(白色),盒子高度的80%之后就是白色，
  // 没有过度颜色了
}
.box2{
  width: 500px;
  height: 200px;
  background-image: linear-gradient(to top, red, white  80%);
  // 可以看出来box和box2的效果差不多
}
.box1{
  width: 500px;
  height: 200px;
  background-image: linear-gradient(to top, red 40%, transparent 80%);
  // 从盒子的底部到盒子高度的40%(从下往上)这期间全是红色且没有过度颜色，从盒子高度40%到80%
  // 是红色到透明色之间的过度，盒高80%之后是全是透明色
}
style>

效果展示如下：