共计 1526 个字符,预计需要花费 4 分钟才能阅读完成。
1、英文命令色彩
p{color:red;}
2、RGB 色彩
这个与 `photoshop` 中的 `RGB` 色彩是统一的,由 `R(red)`、`G(green)`、`B(blue)` 三种色彩的比例来配色。如:p{color:rgb(133,45,200);} 每一项的值能够是 0~255 之间的整数,也能够是 0%~100% 的百分数。如:`
p{color:rgb(20%,33%,25%);} RGB 的第四个参数是透明度,取值为 0 -1
3、十六进制色彩
这种色彩设置办法是当初比拟广泛应用的办法,其原理其实也是 RGB 设置,然而其每一项的值由 0-255 变成了十六进制 00-ff。如:p{color:#00ffff;}
4、hsla 色彩值
如 hsla(360, 50%, 50%, .5) 半透明红色,此形式 ie8 及以下不兼 HSLA(H,S,L,A)
H:Hue(色调)。0(或 360) 示意红色,120 示意绿色,240 示意蓝色,也可取其余数值来指定色彩。取值为:0 – 360
S:Saturation(饱和度)。取值为:0.0% – 100.0%
L:Lightness(亮度)。取值为:0.0% – 100.0%
A:Alpha 透明度。取值 0~1 之间。
生成随机颜色代码:
办法一:RGB 色彩
function RandomColor1(){return '#'+Math.floor(Math.random()*255).toString(10)
}
办法二: 十六进制色彩
function RandomColor2(){return'#'+Math.floor(Math.random()*0xffffff).toString(16)
}
办法三:
应用 RGB 来示意,并应用 es6 语法, 应用 RGB 的益处,一是代码少,简略好实现;二是能够反对透明度,透明度也能够反对随机色彩
function RandomColor3 () {const r = Math.round(Math.random()*255);
const g = Math.round(Math.random()*255);
const b = Math.round(Math.random()*255);
// 随机色彩返回的是一个 0.5 到 1 的两位小数; 如果生成的 0 - 1 就间接是
const a = ((Math.random()*5 + 5) / 10 ).toFixed(2)
const a =Math.random()
const color = `rgba(${r},${g},${b},${a})`
console.log(color)
return color
}
办法四:
function RandomColor4 (){
// 随机一个 32 的 4 次幂而后取整,这个值靠近 fffff 的十进制
var random=parseInt(Math.random()*Math.pow(32,4));
var v=('00000'+random.toString(16)).substr(-4);
//random 返回一个位数不确定的整数,而后 toString(16) 转化成 16 进制,// 如果这个随机数位数不够四位的话前边拼接 5 个 0,最初截取后四位
return v;
}
办法五:
function RandomHColor5() {
// 随机生成十六进制色彩
var hex = Math.floor(Math.random() * 16777216).toString(16);
// 生成 ffffff 以内 16 进制数
while (hex.length < 6) {
//while 循环判断 hex 位数,少于 6 位后面加 0 凑够 6 位
hex = '0' + hex;
}
return '#' + hex; // 返回‘#' 结尾 16 进制色彩
}
本文链接:https://www.ngui.cc/51cto/sho…
正文完