>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26040 个阅读者 刷新本主题
 * 贴子主题:  CSS的合法颜色表示方式 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-16 12:05:51     消息  查看  搜索  好友  邮件  复制  引用

  

CSS  合法颜色表示方式

CSS Colors

     CSS的颜色可以通过以下方法指定:    
  • 十六进制颜色
  • RGB颜色
  • RGBA颜色
  • HSL色彩
  • HSLA颜色
  • 预定义/跨浏览器的颜色名称

十六进制颜色

     所有主要浏览器都支持十六进制颜色值。

     指定一个十六进制的颜色其组成部分是:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。

     例如,#0000FF值呈现为蓝色,因为蓝色的组成设置为最高值(FF)而其他设置为0。                    

范例

    p
    {
       background-color:#ff0000;
    }                    

RGB颜色

     RGB颜色值在所有主要浏览器都支持。

    RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。

    例如RGB(0,0,255)值呈现为蓝色,因为蓝色的参数设置为最高值(255)而其他设置为0。

    此外,下面的值定义相同的颜色:RGB(0,0,255),RGB(0%,0%,100%)。                    

范例

    p
    {
        background-color:rgb(255,0,0);
    }                    

RGBA颜色

     RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

     RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

     RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。                    

范例

     p
    {
        background-color:rgba(255,0,0,0.5);
    }                    

HSL颜色

     IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。

     HSL代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。

     HSL颜色值指定:HSL(色调,饱和度,明度)。

     色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。                    

范例

     p
    {
       background-color:hsl(120,65%,75%);
    }                    

HSLA颜色

     HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

     HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

     指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。                    

范例

     p
    {
       background-color:hsla(120,65%,75%,0.3);
    }



程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-19 11:53:08 重新编辑]
  Java面向对象编程-->Java常用类(上)
  JavaWeb开发-->Web运作原理(Ⅳ)
  JSP与Hibernate开发-->域对象在持久化层的四种状态
  Java网络编程-->Socket用法详解
  精通Spring-->通过Axios访问服务器
  Vue3开发-->CSS过渡和动画
  Vue中qs插件的使用
  animate.css动画样式类型库的用法
  彻底明白VUE中的done参数和函数作用
  css3中translate、transform和translation,以及动画animati...
  Thinking In Vue:vue指令的封装
  JS对树形数据的遍历和过滤,
  理解前后端分离的概念
  jQuery 遍历过滤:缩小搜索元素的范围
  jQuery 遍历DOM 树中的同胞元素
  JavaScript的History 对象
  CSS 表单的用法
  HTML 区块:div和span元素
  JavaScript 变量提升
  JavaScript prototype(原型对象)
  jQuery Mobile 事件
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。