saturate()、desaturate()这两个函数是通过改变颜色的饱和度来得到一个新的颜色,他们和前面介绍的修改亮度得到新颜色的方法非常相似。
//SCSS $baseColor: #ad141e; .saturate { background: saturate($baseColor,30%); //在原色饱和度基础上增加饱和度 } .desaturate { background: desaturate($baseColor,30%);//在原色饱和度基础上减少饱和度 }
编译出来的 css 代码:
//CSS .saturate { background: #c1000d; } .desaturate { background: #903137; }
颜色变了。同样使用 saturation() 函数在终端中进行计算一下,看看他们有什么样的变化:
>> saturation(#ad141e) //原色的饱和度 79.27461% >> saturation(#c1000d) //在原色饱和度基础上增加30%,超过100%时按100%计算 100% >> saturation(#903137) //在原色饱和度基础上减少30%,小于0时按0计算 49.2228%
在编辑器第行输入正确的代码,让按钮边框色是背景颜色的基础上饱和度增加20%
使用saturate()函数,并且设置饱和度为20%
请验证,完成请求
由于请求次数过多,请先验证,完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战