zoukankan      html  css  js  c++  java
  • css3 颜色记

    css3 颜色

    opacity

      使元素呈现出半透明效果。

    opacity:alphavalue || inherit
    

      alphavalue:默认值为1,可以取0~1任意浮点数。取值为1时,元素完全不透明;取值为0时,元素完全透明。不能为负值。
      inherit:表示继承父元素的opacity设置的值。

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div{
           100px;
           height:100px;
           background:#ff0000;
           border:1px solid;
           opacity:0.3;
        }
    </style>
    </head>
    <body>
    	<div>胸无大志者,必受制于人</div>
    </body>
    </html>
    

      opacity使整个元素,包括背景色与前景色都透明了。

    RGBA

      rgb颜色模式(也称三原色)是工业界的一种颜色标准,通过对红(red),绿(green),蓝(blue)三个颜色通道的变化以及它们相互之间的叠加得到各种颜色。在css3中,rgba在rgb基础上增加了控制alpha透明度的参数。

    rgba(r,g,b,a)
    

      r:红色值,其取值可以是正整数或者百分值。
      g:绿色值,其取值可以是正整数或者百分值。
      b:蓝色值,其取值可以是正整数或者百分值。
      a:alpha透明值,其取值在0~1之间。
      以上r,g,b三个参数,正整数值的取值范围在0255;百分数值的取值范围在0%100%。超出范围的数值将截至其最近的取值极限。a参数的取值范围在0~1。四个参数值都不能为负值。

    div{
       100px;
       height:100px;
       background:rgba(255,0,0,0.3);
       border:1px solid;
    }
    

      与opacity类似,都使元素透明,唯一不同的是rgba只透明了元素的背景色,前景色仍然保持原样。

    HSL

      hsl和rgb一样,同属于工业界的一种颜色标准,通过对色调(hue),饱和度(saturation),亮度(lightness)三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。

    hsl(h,s,l)
    

      h:色调。取整数值,可以为任意整数,其中0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红。当它们的值大于360时,实际的值等于该值除360之后的余数。
      s:饱和度。颜色的深浅度和鲜艳程度,取百分数,可以取值为0%~100%之间的任意值,其中0%表示灰度,100%表示饱和度最高。
      l:亮度。取值和饱和度一样,0%最暗,100%最亮。

    div{
       100px;
       height:100px;
       background:hsl(360,80%,80%);
       border:1px solid;
    }
    

    HSLA

      hsla是hsl的扩展模式,在hsl的基础上增加了一个透明通道alpha来设置不透明参数。

    hsla:(<length>,<percentage>,<percentage>,<opacity>)
    

     

    div{
       100px;
       height:100px;
       background:hsla(360,50%,30%,0.5);
       border:1px solid;
    }
    

      css3颜色完。学习之路,不完

  • 相关阅读:
    HTML5 jQuery图片上传前预览
    【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
    20个非常绚丽的 CSS3 特性应用演示
    C#.NET开源项目、机器学习、商务智能
    SqlServer中decimal(numeric )、float 和 real 数据类型的区别[转]
    asp.net Session
    Entity Framework 5.0系列之自动生成Code First代码
    关于Memcache mutex设计模式的.net实现
    Discuz!NT中的Redis架构设计
    使用ServiceStackRedis链接Redis简介
  • 原文地址:https://www.cnblogs.com/fxycm/p/4644873.html
Copyright © 2011-2022 走看看