less14 颜色函数2
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:;
z-index: 100%;
z-index: 50%;
z-index:;
z-index:;
z-index:;
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;
}
less14 颜色函数2的更多相关文章
- Sass关于颜色函数的乐趣
阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在 ...
- Sass函数--颜色函数--HSL函数
HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(ligh ...
- Sass函数--颜色函数--RGB颜色函数
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1. ...
- SCSS & SASS Color 颜色函数用法
最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...
- 2-4 Sass的函数功能-颜色函数
RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...
- Sass 颜色函数
/* * Sass 颜色函数 * RGB 颜色函数 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: * rgb(200,40,88) //根据r:200,g ...
- sass-RGB颜色函数-RGB()颜色函数
在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 ...
- Sass函数--颜色函数--Opacity函数
Opacity函数简介 在 CSS 中除了可以使用 rgba.hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而 ...
- sass的颜色函数
sass中有些非常实用的颜色处理函数,总结如下 1.颜色加深或变浅 lighten($color,$amount) //颜色变浅 darken($color,$amount) //颜色加深 例如: l ...
随机推荐
- java JSON 和 Object 相互转换
1.导入 jackson jar <dependency> <groupId>com.fasterxml.jackson.core</groupId> <ar ...
- POJ2142 The Balance (扩展欧几里德)
本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia The Balance 题目大意 你有一个天平(天平左右两边都可以放砝码)与重量为a,b(1<= ...
- POJ3684 Physics Experiment 【物理】
Physics Experiment Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1031 Accepted: 365 ...
- Codeforces 13C Sequence dp
题目链接:http://codeforces.com/problemset/problem/13/C 题意: 给定n长的序列 每次操作能够给每一个数++或-- 问最少须要几步操作使得序列变为非递减序列 ...
- FireFox所支持的全部标签(持续更新ing)
近期研究上各个浏览器的差别,得到一些资料,FireFox眼下所支持的全部标签类型,持续更新,供大家參考和学习,不喜勿喷哦 http://mxr.mozilla.org/seamonkey/source ...
- Qt Quick Controls 与 Qt Quick Controls 2的区别（详细对照）
Qt Quick Controls 原本是为支持桌面平台而开发的,后来又加入了移动平台和嵌入式平台的支持.它们应用非常广泛,因为它们提供了足够灵活的样式系统,以允许开发具有平台相关或者无关风格的应用程 ...
- kibana智能检索发送多次_msearch —— 配置index pattern，同时设置时间段，就知道到底是在哪些索引里去查找数据了
kibanasite/elasticsearch/log-*/_field_stats?level=indices 返回: {"_shards":{"total ...
- zzulioj--1708--01串也疯狂之光棍也有伴(dp)
1708: 01串也疯狂之光棍也有伴 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 199 Solved: 50 SubmitStatusWeb B ...
- hexo博客谷歌百度收录踩坑日记
title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...
- BZOJ 2588 主席树
思路: 主席树 做完BZOJ 3123 觉得这是道水啊-- 然后狂RE 狂MLE 要来数据 忘把deep[1]设成1了----------. 啊wocccccccccccccccc //By Siri ...