专栏首页python3CSS3的颜色特性

CSS3的颜色特性

CSS3颜色特性 “佛靠金装,人靠衣装”,网页也是如此。随着互联网的迅速发展,一个网页给人们留下的第一印象,既不是它的内容,也不是它的设计, 而是整体颜色。为了能够达到人们的需求,Web设计师除了需要掌握网站制作的技术之外,还必须能够很好地应用 Web颜色。换句话说,网站颜色的使用好坏, 直接影响网站的生存力。 网页色彩的表现原理: 我们知道有256种Web安全颜色,其实这256种颜色是指8位颜色的表现能力,随着科技的发展,现在颜色不局限于8位,16位色彩的总数是65536色,也就是2的16次方,而新增了24位元色彩,也就是2的24次方,即16777216种颜色。32位色就是2的32次方的发色数,即16777216种颜色,不过它增加了256阶颜色的灰度。 32位色和16位色肉眼分辨不出来吗? 如果用两台品牌型号都一样 的显示器, 分别调不同的颜色, 就能看出区别。 而在Web页面的设计中, 颜色主要运用16 进制数值的表示方法, 为了用HTML表现RGB颜色, 使用十六进制数 0 ~ 255, 改为十六进制就是 00 ~ FF, 用RGB的顺序罗列就成为HTML颜色编码。 例如, 在 HTML 编码中“ 000000” 就是指红色( R)、绿色( G) 和蓝色( B) 都没有,就是0状态,也就是黑色。相反“ FFFFFF” 就是就是 红色( R)、 绿色( G) 和蓝色( B)都是 255,也就是白色。显示器是由一个个像素构成,利用电子束来表现色彩。像素把光的三原色: 红色( R)、绿色( G)、蓝色( B) 组合成的色彩 按照科学原理表现出来。 一 像素包含 8 位元色彩的信息量, 有 从 0 ~ 255 的256个单元, 其中 0 是 完全 无光 状态, 255 是最 亮 状态。

  1. RGB色彩模式,RGB色彩模式是光的三原色 红、 绿、 蓝 混合产生的。 Web页面中使用的图片在大多数是在RGB色彩模式中制作的。 RGB色彩是颜色相加混合产生的, 这样的混合称为加色混合。加色混合中, 补色是指相关的两个颜色混合时, 成为白色的情况。 http:/ /www.iis7.com/b/wzjk/ 2.CMYK色彩模式,CMYK色彩模式是指颜料的三原色青色、洋红、×××加上黑色,这四种颜色减色混合表现出的色彩是主要用于出版印刷时制作图像的一种模式。 减色混合是指是指颜色混合后出现 的色彩比原来的颜色暗淡, 这样与补色相关的两种颜色混合就会出现彩色的情况。
  2. 索引色彩模式,索引色彩模式是已经被限定在256种颜色以内的模式, 主要用于Web页面安全色彩和制作透明GIF图片。在Photoshop中制作透明GIF图片时, 一定要使用索引色彩模式。
  3. 灰度模式,灰度模式是无色彩模式, 在制作黑白图片时使用, 主要用于处理 黑、白、灰色 图片。 5.双色调模式,双色调模式是在黑白图片中加入颜色,使色调更加丰富的模式。RGB、CMYK等颜色模式都不可以直接转换为双色调模式,必须将色彩模式先转换为灰度模式后, 才能够转换为双色调 模式。 用双色调模式可以用很小的空间制作出漂亮的图片。 6.位图模式,位图模式是用白色和黑色共同处理图片的模式。与双色调一样,除双色调模式和灰度模式外,其他色彩模式都需要转换为灰度模式后,再转换为位图模式。 位图模式可以选定5种图片 处理 方法: -50% 阈值, 是在 256 种 颜色 中, 当 颜色 值 大于 129 就 处理 为 白色, 反之则处理为黑色。 -图案仿色, 是按一定的模式处理图片。 -扩散仿色为最常用的选项, 是按黑色和白色的阴影使其分布。 -半调网屏与自定图案, 是利用盲点的各种形态和密度与用户自己设置样式的处理方式。 CSS3 颜色模式在 CSS2. 的基础 CSS3上 新增了 RGBA、 HSL 和 HSLA:
  4. RGBA在RGB基础上增加了控制alpha透明度的参数,其中RGB颜色模式( 也称为三原色) 是工业界的一种颜色标准,通过对红( R)、绿( G)、蓝( B) 三个颜色通道的变化以及它们相互之间的叠加得到各种颜色,RGB几乎包括人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。 而RGBA仅在 RGB 的基础上增加了alpha通道, 用来设置颜色的透明度。 RGBA的属性参数很简单, 分别代表红,绿,蓝以及透明度的值。 -R: 红色值, 其取值可以是正整数或者百分值。 -G: 绿色值, 其取值可以是正整数或者百分值。 -B: 蓝色值, 其取值可以是正整数或者百分值。 -A: alpha透明值, 其取值在0~1范围之间。 这几个参数值都不可以取负值。
  5. HSL颜色模式HSL和RGB一样,同属于工业界的一种颜色标准,通过对色调( H)、饱和度( S)、亮度( L)三个颜色通道的变化以及它们相互之间的叠加 得到各式各样的颜色的。 HSL标准几乎包括人类视力所能感知的所有颜色, 是目前运用最广的颜色系统之一。使用HSL模型为图像中每一个像素的HSL分量分配 一个0~255范围内的强度值。HSL图像只用三种通道按照不同的比例混合,在屏幕上呈现16777216种颜色。前面也说过,色调( H)是在色盘上的颜色,颜色 的选择是使用饱和度( S),0度是红色,120度为绿色,240度为蓝色。同时可以使用不同的亮度( L)来控制这个颜色,其中0表示的是一个灰度,不使用任何 的色彩,而100%是指在充分使用一个颜色。 -H: 色调( Hue)取整数值(< length>),可以为任意整数,其中0( 或360或-360) 表示红色, 60表示×××, 120表示绿色, 180表示青色,240表示 蓝色, 300表示洋红。 当它们的值大于360时,实际的值等于该值除360之后的余数。例如,如果色调的值是480,则实际的颜色值为480除以360之后得到的 余数120。 -S: 饱和度( Saturation)。就是颜色的深浅度和鲜艳程序, 取百分数(< percentage>), 可以取值0~100%之间的任意值,其中0表示灰度( 没有该 颜色), 100%表示饱和度最高( 该颜色最鲜艳)。 -L: 亮度( Lightness)。取值和饱和度( S) 一样,可以取值0~100%之间的任意值,其中0最暗( 黑色),100%最亮(白色)。
  6. HSLA颜色模式HSLA是HSL的扩展模式, 在HSL的基础上增加一个透明通道alpha来设置不透明参数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python-object-one

    py3study
  • BackTrack R3 安装 Open

    在执行 /pentest/misc/openvas/openvas-check-setup.sh时报错

    py3study
  • 初识网络编程

    UDP协议(数据报协议)    无需建立双向连接,并且传输数据不可靠,可能会出现丢包的情况    通信速度比较快,但是发送的数据不会在内存中保留!  ...

    py3study
  • 转发和重定向的区别

    一个web资源收到客户端请求后,通知服务器去调用另外一个web资源进行处理,称之为请求转发。 一个web资源收到客户端请求后,通知浏览器去访问另外一个web...

    望天
  • VALSE 2019 Call for Poster/Spotlight

    Poster环节是VALSE年度大会的重要内容之一,往届大会已有百篇以上论文报名进行Poster展示。VALSE2019将在往届经验教训的基础上,进一步强化该环...

    SIGAI学习与实践平台
  • 更改Linux默认端口,并设置仅允许密钥登录

    刺_猬
  • React性能优化 -- 利用React-Redux

    注意这里面,如果可以在渲染virtual DOM之前就可以判断渲染结果不会有变化,那么可以直接不进行virtual DOM的渲染和比较,速度会更快。

    IMWeb前端团队
  • 记一次腾讯优酷加密格式转码成mp4的经历

    昨天回家了,想在家里大电视上面看看1080P,因为家人很少看,而且我也不是很清楚它的配置,所以就打算先下在硬盘里然后插电视放,所以要解决的就是下载,转码mp4问...

    许坏
  • 防火墙(7)——禁止具体协议

    (1)tcp 此时我们禁止的是ssh命令,而并不会禁止icmp协议,即ping命令

    gzq大数据
  • 「软件架构」10种常见的软件架构模式

    有没有想过企业规模的系统是如何设计的?在主要的软件开发开始之前,我们必须选择一个合适的架构,为我们提供所需的功能和质量属性。因此,在将它们应用于我们的设计之前,...

    首席架构师智库

扫码关注云+社区

领取腾讯云代金券