zoukankan      html  css  js  c++  java
  • 快速了解CSS3当中的HSLA 颜色值怎么算

    CSS3文档中提到:(HSLA)

    H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。

    S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高

    L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。

    A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。

    这样一说大家肯定是很迷的一个概念

    举点例子吧:(只要区分中间的百分比值)

    这是标准的绿色值:

    background-color:hsla(120,50%,50%,1); 

    --------------------------------------------------------

    这样就会变成白色:

    background-color:hsla(120,50%,100%,1); 

    --------------------------------------------------------

    这样就会变成黑色:

    background-color:hsla(120,50%,0%,1); 

    --------------------------------------------------------

    这样就会变成明亮的绿色:

    background-color:hsla(120,100%,50%,1); 

    --------------------------------------------------------

    我们发现第三个值>50%就加白色(原本的基础上多了白色),<50%就加黑色(原本的基础上多了黑色):

    background-color:hsla(120,100%,20%,1);

    --------------------------------------------------------

    这样就会变成明亮的灰色:

    background-color:hsla(120,0%,50%,1);

    -----------------------------------------------------------------

    我们发现第二个值>50%就加亮(原本的基础上绿色更明显),<50%就加暗(原本的基础上绿色更少更淡):

    background-color:hsla(120,20%,50%,1);

    --------------------------------------------------------

  • 相关阅读:
    cvpr热词云
    第八周总结
    从小工到专家阅读笔记01
    【Spring实战4】10--搭建SpringMVC环境
    【Spring实战4】09---构建Spring web
    【Spring实战4】08---面向切面AOP
    读书
    【Spring实战4】07---Bean的作用域
    【Spring实战4】06---装配Bean(xml)
    【Spring实战4】05---装配Bean(Java)
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/8445232.html
Copyright © 2011-2022 走看看