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 ...
随机推荐
- 面试-MySQL
1 事务的特性 事务具有四个特性:原子性(Atomicity).一致性(Consistency).隔离性(Isolation)和持续性(Durability).这四个特性也简称ACID性. (1)原 ...
- ThinkPHP新建控制器
ThinkPHP新建控制器 一.效果图 二.步骤 1.新建控制器文件 2.编写控制器文件 3.访问控制器 三.注意事项
- 5分钟学会 CSS Grid 布局
欢迎加入前端交流群交流知识&&获取视频资料:749539640 这是一篇快速介绍网站未来布局的文章. Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工 ...
- 计算label
func getCGSize(size:CGSize,fontSize:CGFloat,text:String)->CGSize{ let attributes = [NSFontAttribu ...
- excel文件使用html导出
<table><tr><td>1</td></tr><tr><td>2</td></tr>& ...
- spm 捕获
目录 自动捕获 从library cache 中加载 从SQL 调优级加载 1.自动捕获 当optimizer_capture_sql_plan_baselines参数设置为TRUE,查询优化器自动存 ...
- NPOI 给导出Excel添加简单样式
需求分析:如下图为我之前导出的Excel数据,没有一点样式,标题行不明显,各个列的数据紧凑,查看数据时得手动拉宽每列,故这次要针对以上问题对它进行优化 结果展示: 代码: /// <summar ...
- （转载）自定义ExpandableListView，实现二级列表效果
先看效果图: 上图是我们要实现的效果,那么现在我们开始着手去做,主要分为以下几步: 一丶我们需要根据效果图去思考该如何动手,从上图分析看,我们可以用一个相对布局RelativeLayout来完成gro ...
- HTML基础——网站后台显示页面
1.框架集标签:(作用:将页面进行区域的划分) <frameset rows="" cols=""> <frame src="&qu ...
- QT笔记 -- (6) opengl
参考 http://blog.csdn.net/myths_0/article/details/24431597 用glut绘制一个茶壶 一句话,继承QGLWidget,实现下面三个函数,用子类定义窗 ...