css颜色值设置方式有哪些?以及如何随机一个颜色?

网页中颜色的使用方式有一下几种

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)‘;
  }
时间: 2024-10-15 23:06:38

css颜色值设置方式有哪些?以及如何随机一个颜色?的相关文章

jQuery css() 方法:设置或返回被选元素的一个或多个样式属性

jQuery css() 方法 jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: cs

CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点. 1.嵌入样式表 <html> <head> <title>CSS四种设置方式</title> </head> <body> <p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p&g

CSS的语法和设置方式

CSS语法 格式 属性:值:属性: 值1:属性1......: 属性和值使用冒号":" 单位 颜色:#rgb   #8fa   #aaffaa   red   green 大小:em   2em  px   pt   %  pc  cm   mm  in URL(url) 注释/* --*/在其中不要在包含注释 CSS的四种设置方式 内联样式表:在HTML元素标签中使用style属性内联(每个HTML标签都可以加样式) 嵌入样式表:通过HTML的<style>标签蒋CSS嵌

css如何设置字符串中第一个字符的样式

css如何设置字符串中第一个字符的样式:本章节介绍一下如何使用css设置字符串中第一个字符的样式.以前我们实现此效果的方式,可能会在第一个字符上嵌套上一个span标签.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有很大的关系.排版则主要依靠CSS来设置.调节. 下面说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中) (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css" 

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

Android进阶(二十五)setTextColor()的参数设置方式

setTextColor()的参数设置方式 查了下资料发现setTextColor()的参数可以写成以下形式: 直接使用颜色值 setTextColor(0xFF0000FF);//0xFF0000FF是int类型的数据,分组一下0x|FF|0000FF,0x是代表颜色整数的标记,ff是表示透明度,0000FF表示颜色,注意:这里0xFF0000FF必须是8个的颜色表示,不接受0000FF这种6个的颜色表示. 使用系统自带的颜色类 setTextColor(android.graphics.Co

css样式设置小技巧

元素分为行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素. 水平居中内容如下~ 一.行内元素:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 二.定宽块状元素:满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中的. margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

CSS 的导入方式 (link or import ?)

前言 最常看见的CSS的使用方式有三种 1. 在span, div 等标签上直接使用 style 属性定义CSS <span style="color:blue">This is Blue.</span> 2. 在当前的html 文件中定义class, 在html 标签中用class 的属性设置. <!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr