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 ...
随机推荐
- 复习昨天的，继续过Hard题目
# Title Editorial Acceptance Difficulty Frequency . 65 Valid Number 12.6% Hard . 126 Word ...
- Linux多线程实践（四 ）线程的特定数据
在单线程程序中.我们常常要用到"全局变量"以实现多个函数间共享数据, 然而在多线程环境下.因为数据空间是共享的.因此全局变量也为全部线程所共同拥有.但有时应用程序设计中有必要提供线 ...
- 图片3d轮放查看效果
本功能比較简单,就是一个大幕.左右滚动播放图片. 关键点在于怎样实现平滑的滚动,包含动画效果,3d效果等. <style> img { position: absolute; top:20 ...
- Android动态载入JAR包的实现方法
有时候我们须要使用动态更新技术,简单来说就是:当我们把开发jar包发送给用户后.假设后期升级了部分代码.这时让用户的jar包自己主动更新,而不是用户主动手动地去更新的技术就是动态更新.这个须要使用的技 ...
- 实战c++中的vector系列--再谈vector的insert()方法(都是make_move_iterator惹的祸)
之前说过了关于vector的insert()方法,把vector B的元素插入到vector A中.vector A中的结果我们可想而知,可是vector B中的元素还会怎样? 看看之前写过的程序: ...
- silverlight wpf DataTemplate Command binding
<Grid x:Name="LayoutRoot" Background="White"> <CommonControl:NoapDataGr ...
- ICMP 隧道——将流量封装进 IMCP 的 ping 数据包中，旨在利用 ping 穿透防火墙的检测
利用 ICMP 隧道穿透防火墙 转自:http://xiaix.me/li-yong-icmp-sui-dao-chuan-tou-fang-huo-qiang/ 以前穿透防火墙总是使用 SSH 隧道 ...
- VC 下加载 JPG / JPEG / GIF / PNG 图片最简单的方法
VC MFC 提供的 API LoadBitmap / LoadImage 类 CBitmap 等都只能操作 BMP 位图,图标.对于其他常用的 JPG / JPEG / GIF / PNG 格式,它 ...
- POJ 3469 Dinic （二元关系）
题意: 思路: //By SiriusRen #include <queue> #include <cstdio> #include <cstring> using ...
- MyBatis数据持久化（九）动态sql
本文摘自:mybatis参考文档中文版 MyBatis的一个强大的特性之一通常是它的动态SQL能力.如果你有使用JDBC或其他相似框架的经验,你就明白条件地串联SQL字符串在一起是多么的痛苦,确保不能 ...