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

less14 颜色函数2

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

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，如需转载请自行联系原作者

文章标签：
前端开发
范大脚脚
目录
相关文章
红目香薰
|
2月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
红目香薰
38 0
晚来南风晚相识
|
2月前
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
晚来南风晚相识
48 0
不雨_亦潇潇
|
XML 数据格式
【opencv3】滑动条调节RGB颜色阈值并输出滑动条的值
【opencv3】滑动条调节RGB颜色阈值并输出滑动条的值
不雨_亦潇潇
176 0
xu_yanfeng
颜色的多种表示方式和应用
颜色的多种表示方式和应用
xu_yanfeng
113 0
oqjytlomoaxyw
颜色配比
颜色搭配
oqjytlomoaxyw
183 0
颜色配比
w53alm3uernjs
125.设置线条类型
125.设置线条类型
w53alm3uernjs
43 0
w53alm3uernjs
146.矩形区域的颜色填充
146.矩形区域的颜色填充
w53alm3uernjs
61 0
晚来南风晚相识
颜色配值
颜色配值
晚来南风晚相识
96 0
颜色配值
bug菌
ECharts给柱状条设置不同的颜色且给坐标轴名设置不同颜色
ECharts给柱状条设置不同的颜色且给坐标轴名设置不同颜色
bug菌
535 0
ECharts给柱状条设置不同的颜色且给坐标轴名设置不同颜色
yechaoa
常用颜色RGB、灰度值、取色值、透明度。
常用颜色RGB、灰度值、取色值、透明度。
yechaoa
523 0

热门文章

最新文章

  • 1
    Docker的Windows容器初体验
  • 2
    springboot整合rocketmq，快速上手消息队列
  • 3
    使用TDengine国产时序数据库存储能耗数据并通过钉钉机器人接收报警信息
  • 4
    [机器学习] 1、《机器学习系统设计》学后总结
  • 5
    Java程序性能优化19
  • 6
    codevs 3143 二叉树的序遍历
  • 7
    微信吸粉技巧之:微社区
  • 8
    火车头采集列表页
  • 9
    [20140116]ORA-20002.txt
  • 10
    【算法导论】二叉树的广度优先遍历
  • 1
    JDBC的路径讲解？
    25
  • 2
    Action:Consider the following: If you want an embedde ，springBoot配置数据库，补全springBoot的xml和mysql配置信息就好了
    25
  • 3
    如何使用Maven构建SpringBoot项目
    25
  • 4
    Class path contains multiple SLF4J bindings，后来找到的解决思路是idea2019.3必须用java11和idea2019.3版本，必须用applicatio
    19
  • 5
    SpringBoot第一次导入项目，Maven依赖全爆红，该怎样解决，idea2019.3版本，必须用application2.7.6或者以下
    23
  • 6
    Error:Internal error: (java.lang.IllegalAccessError) class com.，idea2019.3版本，必须用application2.7.6或者以下
    24
  • 7
    Error:java: 错误: 无效的源发行版：13， 类文件具有错误的版本 61.0, 应为 55.0 请删除该文件或确保该文件位于正确的类路径子目录中。
    17
  • 8
    Spring Boot Application in default package
    26
  • 9
    This is not a valid Java qualified name
    24
  • 10
    idea没有Maven运行界面怎么办
    17

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）