AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

less14 颜色函数2

2017-11-15 1138
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

less

复制代码 
div{

//  hue()色相值
z-index: hue(hsl(90,100%,50%));  //90
////saturation()饱和度
z-index: saturation(hsl(90,80%,50%));  //80%
////lightness()亮度值
z-index: lightness(hsl(90,100%,100%));  //100%

//  hsv(90,100%,50%)
  z-index:hsvhue( hsv(90,100%,50%));  //函数90
  z-index:hsvsaturation( hsv(90,100%,50%)); //函数100%
  z-index:hsvvalue( hsv(90,100%,50%)); //函数50%

//rgba(29,199,29,80%)
//  提取红色
z-index: red(rgba(29,199,150,80%));  //29
//  //  提取绿色
z-index: green(rgba(29,199,150,80%));  //199
//  //  提取蓝色
z-index: blue(rgba(29,199,150,80%));  //29
//  //  提取透明度
z-index: alpha(rgba(29,199,150,80%));  //0.8

//  计算颜色对象luma的值（亮度的百分比表示法）。
z-index:luma(rgb(100,200,30));
////  计算没有伽玛校正的亮度值
  z-index:luminance(rgb(100,200,30));

}
复制代码

css

复制代码 
div {
  z-index: 80%;
  z-index: 90;
  z-index: 100%;
  z-index: 50%;
  z-index: 29;
  z-index: 199;
  z-index: 150;
  z-index: 0.8;
  z-index: 44%;
  z-index: 65%;
}
复制代码

 less

复制代码 
body{
  c:hsl(90,80%,50%);
  c:saturate(hsl(90,80%,50%),20%);
}
div{
  width: 90px;
  height: 50px;
  font-size: 16px;
  text-align: center;
}
.ys1{
  background: hsl(90,80%,50%);
}
.ys2{
  background: saturate(hsl(90,80%,50%),20%);
}
.ys3{
  background: desaturate(hsl(90,80%,50%),20%);
}
.ys4{
  background: lighten(hsl(90,80%,50%),20%);
}
.ys5{
  background: darken(hsl(90,80%,50%),20%);
}
.ys66{
  background:hsla(90,80%,50%,50%);
}
.ys6{
  background: fadein(hsla(90,80%,50%,50%),50%);
}
.ys7{
  background: fadeout(hsla(90,80%,50%,50%),40%);
}
.ys8{
  background: hsl(90,80%,50%);
}
.ys9{
  background: fade(hsl(90,80%,50%),40%);
}
.ys10{
  background: hsl(10,90%,50%);
}
.ys11{
  background: spin(hsl(0,90%,50%),360);
}

.ys12{
  background: rgba(100,50,20,0.5);
}
.ys13{
  background: rgba(0,150,120,0.2);
}
.ys14{
  background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}
.ys15{
  background: hsl(90,100%,50%);
}
.ys16{
  background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)
}
复制代码

css

复制代码 
body {
  c: #80e619;
  c: #80ff00;
}
div {
  width: 90px;
  height: 50px;
  font-size: 16px;
  text-align: center;
}
.ys1 {
  background: #80e619;
}
.ys2 {
  background: #80ff00;
}
.ys3 {
  background: #80cc33;
}
.ys4 {
  background: #b3f075;
}
.ys5 {
  background: #4d8a0f;
}
.ys66 {
  background: rgba(128, 230, 25, 0.5);
}
.ys6 {
  background: #80e619;
}
.ys7 {
  background: rgba(128, 230, 25, 0.1);
}
.ys8 {
  background: #80e619;
}
.ys9 {
  background: rgba(128, 230, 25, 0.4);
}
.ys10 {
  background: #f2330d;
}
.ys11 {
  background: #f20d0d;
}
.ys12 {
  background: rgba(100, 50, 20, 0.5);
}
.ys13 {
  background: rgba(0, 150, 120, 0.2);
}
.ys14 {
  background: rgba(65, 85, 55, 0.35);
}
.ys15 {
  background: #80ff00;
}
.ys16 {
  background: #ffffff;
}
复制代码

 less

复制代码 
body{
  c:hsl(90,80%,50%);
  c:saturate(hsl(90,80%,50%),20%);
}
div{
  width: 90px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: multiply(#ff6600,#000000);//得到更深的颜色
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: multiply(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: multiply(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: screen(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: screen(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: screen(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: overlay(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: overlay(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: overlay(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: softlight(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: softlight(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: softlight(#ff6600,#fff);
}


.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: hardlight(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: hardlight(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: hardlight(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: difference(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: difference(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: difference(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: exclusion(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: exclusion(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: exclusion(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: average(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: average(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: average(#ff6600,#fff);
}

.ys1{
  background:#ff6600 ;
}
.ys2{
  background: #000000;
}
.ys3{
  background: negation(#ff6600,#000000);
}
.ys4{
  background:#ff6600 ;
}
.ys5{
  background: #333;
}
.ys6{
  background: negation(#ff6600,#333);
}
.ys7{
  background:#ff6600 ;
}
.ys8{
  background: #ffffff;
}
.ys9{
  background: negation(#ff6600,#fff);
}
复制代码

css

复制代码 
body {
  c: #80e619;
  c: #80ff00;
}
div {
  width: 90px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #000000;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #331400;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #ff6600;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #ff6600;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #ff8533;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #ffffff;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #ff0000;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #ff2900;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #ffcc00;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #ff2900;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #ff4100;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #ffa100;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #000000;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #662900;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #ffffff;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #ff6600;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #cc3333;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #0099ff;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #ff6600;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #cc7033;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #0099ff;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #803300;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #994d1a;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #ffb380;
}
.ys1 {
  background: #ff6600 ;
}
.ys2 {
  background: #000000;
}
.ys3 {
  background: #ff6600;
}
.ys4 {
  background: #ff6600 ;
}
.ys5 {
  background: #333;
}
.ys6 {
  background: #cc9933;
}
.ys7 {
  background: #ff6600 ;
}
.ys8 {
  background: #ffffff;
}
.ys9 {
  background: #0099ff;
}
复制代码

 


本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7002094.html，如需转载请自行联系原作者

文章标签：
前端开发
范大脚脚
目录
相关文章
2025「AI安全」全球攻防赛小编
|
6天前
|
人工智能 运维 安全
从“裸奔”到“金钟罩”：AI身份凭据安全的进化之路
构建身份权限安全，护航企业数据合规
2025「AI安全」全球攻防赛小编
1179 14
弹性计算-百晓生
|
4天前
|
人工智能 异构计算
敬请锁定《C位面对面》，洞察通用计算如何在AI时代持续赋能企业创新，助力业务发展！
敬请锁定《C位面对面》，洞察通用计算如何在AI时代持续赋能企业创新，助力业务发展！
弹性计算-百晓生
1000 11
modelscope
|
5天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2，用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下，早期版本的IndexTTS虽然在多场景应用中展现出良好的表现，但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题，并进一步推动零样本语音合成在实际场景中的落地能力，B站语音团队对模型架构与训练策略进行了深度优化，推出了全新一代语音合成模型——IndexTTS2 。
modelscope
519 14
2025「AI安全」全球攻防赛小编
|
4天前
|
云安全 人工智能 安全
内含报名福利｜云栖大会AI安全前沿攻防技术论坛报名开启！
论坛时间：9月26日上午
2025「AI安全」全球攻防赛小编
874 9
探索云世界
|
11天前
|
人工智能 JavaScript 测试技术
Qwen3-Coder入门教程｜10分钟搞定安装配置
Qwen3-Coder 挑战赛简介：无论你是编程小白还是办公达人，都能通过本教程快速上手 Qwen-Code CLI，利用 AI 轻松实现代码编写、文档处理等任务。内容涵盖 API 配置、CLI 安装及多种实用案例，助你提升效率，体验智能编码的乐趣。
探索云世界
888 109
aliyun7937252284-32777
|
5天前
|
人工智能 测试技术 API
智能体（AI Agent）搭建全攻略：从概念到实践的终极指南
在人工智能浪潮中，智能体（AI Agent）正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力，广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南，助你打造专属智能体，迎接智能自动化新时代。
aliyun7937252284-32777
474 7