css颜色值设置方式有哪些?以及如何随机一个颜色?
2017-03-13 23:10
585 查看
网页中颜色的使用方式有一下几种
1、颜色名称 ,如red black white
2、十六进制颜色,网页中常用,每两位代表红绿蓝的值的比例, 如 #ffffff白色 #000000黑色
3、rgba颜色, 如 rgba(255,255,255,0.5) 半透明白色 ,此方式ie8及以下不兼容
RGBA(R,G,B,A)
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
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之间。
那么怎么随机一个颜色值呢?
一般我们可以在使用rgba 或者 hsla模式的时候随机里面的值
1、随机rgba颜色
1)随机一个0~255的值,2)将这些值拼接成rgba的字符串即可
代码如下:(创建一个透明度为0.8的随机的颜色对象,获取对象的color属性及为需要的rgba颜色值)
2、随机hsla颜色
1)随机一个0~360的颜色值范围,2)拼装hsla的颜色值字符串(后面的饱和度、亮度、透明度按自己需求给值即可)
1、颜色名称 ,如red black white
2、十六进制颜色,网页中常用,每两位代表红绿蓝的值的比例, 如 #ffffff白色 #000000黑色
3、rgba颜色, 如 rgba(255,255,255,0.5) 半透明白色 ,此方式ie8及以下不兼容
RGBA(R,G,B,A)
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
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之间。
那么怎么随机一个颜色值呢?
一般我们可以在使用rgba 或者 hsla模式的时候随机里面的值
1、随机rgba颜色
1)随机一个0~255的值,2)将这些值拼接成rgba的字符串即可
代码如下:(创建一个透明度为0.8的随机的颜色对象,获取对象的color属性及为需要的rgba颜色值)
//颜色对象 function Color(){ this.r = Math.floor(Math.random()*255); this.g = Math.floor(Math.random()*255); this.b = Math.floor(Math.random()*255); this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)'; }
2、随机hsla颜色
1)随机一个0~360的颜色值范围,2)拼装hsla的颜色值字符串(后面的饱和度、亮度、透明度按自己需求给值即可)
//颜色对象 function Color(){ this.colorAngle = Math.floor(Math.random()*360); this.color = 'hsla('+ this.colorAngle +',100%,50%,1)'; }
相关文章推荐
- css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
- css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
- 如何设置网页中水平线的颜色,水平线还有哪些属性?
- 一个CSS文件内如何设置多个body及多个DIV样式,并给出页面如何调用
- swing中JPanel如何实现分组框的效果以及设置边框颜色
- 【iOS开发-31】UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- swing中JPanel如何实现分组框的效果以及设置边框颜色
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
- 使用CSS设置滚动条样式以及如何去掉滚动条的方法
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子
- Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子
- 如何用CSS改变上划线、下划线以及删除线的颜色呢?
- 如何设置对话框背景色以及控件颜色
- 如何用CSS改变上划线、下划线以及删除线的颜色
- Flex中如何通过backgroundImage, backgroundColor和backgroundAlpha样式,设置VBox的背景图片和背景颜色以及改变透明度
- JAVA swing中JPanel如何实现分组框的效果以及设置边框颜色
- CSS优先级算法如何计算?有哪些判定规定及计算方式