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 ...
随机推荐
- 洛谷 P2507 [SCOI2008]配对
P2507 [SCOI2008]配对 题目背景 四川NOI2008省选 题目描述 你有 n 个整数Ai和n 个整数Bi.你需要把它们配对,即每个Ai恰好对应一个Bp[i].要求所有配对的整数差的绝对值 ...
- 电子签章盖章之jQuery插件jquery.zsign
简介: 使用jquery.zsign可以实现电子签章盖章效果,使用方便,只需提供自己的章图片.效果图如下: 页面引用: <link href=&quo ...
- Socket实现一个简单的半双工通信
Socket是client进行在网络与server进行数据交互的一种基本通信方式.通信有三种通信.即单工.半双工,和全双工. 所谓单工,就是仅仅可以进行单向通信,如bb机. 而半双工就是一来一回的通信 ...
- [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter
Every Angular CLI generated project comes already with Karmapreinstalled as well a couple of executa ...
- xftp和xshell的使用
Xftp和Xshell配合使用部署环境. (linux系统) Xftp为可视化工具.主要用来复制文件. xshell则通过输入命令来对server进行操作,如启动服务等等. 一. Xftp的连接 新 ...
- mysql int(m)与int(m)的差别
预计大多数開始接触mysql的朋友们都会有这个问题:int(M) 里面的数值究竟是什么意思? 依据相关资料总结了下: int(M) zerofill,加上zerofill后M才表现出有点点效果,比方 ...
- Found conflicts between different versions of the same dependent assembly that could not be resolved
https://stackoverflow.com/questions/24772053/found-conflicts-between-different-versions-of-the-same- ...
- nyoj--61--传纸条（一）(动态规划)
传纸条(一) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列 ...
- 关于输入getline
此函数可读取整行,包括前导和嵌入的空格,并将其存储在字符串对象中. getline 函数如下所示: getline(cin, inputLine); 其中 cin 是正在读取的输入流,而 inputL ...
- BZOJ 3339 线段树
思路: 考虑离线处理 显然 l固定时 r越大 ans越大 那我们不妨按照l从小到大排序 l->l+1的时候 l到next[l]这段区间都跟a[l]取min就好了 搞颗线段树维护一下 //By S ...