css中background: lighten的用法

话不多说看例子：

<template>
  <div class="btn" @click="btn">点击弹出消息提示框</div>
  <div class="contrast"></div>
  <div class="contrast1"></div>
  <div class="contrast2"></div>
</template>


<script setup>
import Message from "@/Message";
import {onMounted} from "vue";
const btn = ()=>{
  Message({type:'warn', text:"hello world"})
}


</script>

<style lang="less" scoped>
.btn{
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: deeppink;
}
.contrast{
  width: 300px;
  height: 40px;
  background: lighten(deeppink, 20%);
}
.contrast1{
  width: 300px;
  height: 40px;
  background: lighten(deeppink, 30%);
}
.contrast2{
  width: 300px;
  height: 40px;
  background: lighten(deeppink, 40%);
}
</style>

结果如下：

说明，lighten第一个是颜色值，第二个参数是相比第一个底色少百分之几的，比如第一个是100分的颜色值，lighten(100, 40%)=60%即原来的60%