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来设置不透明参数。

原文地址:http://blog.51cto.com/13941970/2293819

时间: 2024-08-30 06:36:35

CSS3的颜色特性的相关文章

css3的三大特性以及移动端说明

css3的三大特性: 一.层叠性 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突. 一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准. 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠 CSS最

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p

CSS3新增颜色属性

CSS颜色属性复习 color name 颜色英文名称命名(如red,blue,pink,white等) HEX方式 十六进制方式(#FF0000,#B9B9B9等) rgb方式 三原色配色方式(rgb(255,0,00)) 这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式.CSS3中新增了几种颜色属性. CSS3新增颜色属性 1.RGBA模式 2.HSL模式 3.HSLA模式 1.RGBA模式 rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝

CSS3多颜色风格切换的菜单

<!DOCTYPE html><html lang="en" ><head><meta charset="utf-8" /><title>石家庄有机肥</title><style>body { font:14px/1.3 Arial,sans-serif;}.container { background-color: #EEEEEE; border-radius: 5px 5px 5

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

CSS3的颜色透明度 ajax请求时loading

1.background-color:rgba(0,0,0,0.65)         这行代码让覆盖层变黑色,且有0.6的透明度 正常情况下遮盖层会把透明度遗传给弹出框(它的子元素),但是利用CSS3的这个特性则不会 2. 在ajax方法中定义任意位置显示的“加载中...”提示 $('#ajax_test2').click(function(){      $.ajax({           url ---- url路径,根据你需要些啦,           type:'post',    

一张图搞定CSS3全部新特性【king】

最近这张图火了,让我火遍了大江南北,震惊了整个CSS圈 一张思维导图搞定CSS3全部新特性(图片太大,切片上传) 原图下载地址 配套CSS3实战视频地址 由king老师历时一个月,精心收集与整理的CSS3全部新特性的素材,包括国外资源.辅助工具.项目素材.实战案例...就不一一列举了,好不好看了就知道,兄弟姐妹们,顶起哈~ 山哥出品,必属精品 Powered By King 原文地址:https://www.cnblogs.com/jlfw/p/12219688.html

CSS3的新特性

上一篇写了HTML5的新特性,不能落下CSS3独坐空房啊 HTML5新特性的链接:https://www.cnblogs.com/pingzi-wq/p/11490383.html 边框 border-radius —— 圆角边框 box-shadow —— 边框阴影 border-image —— 图片自定义边框 // 圆角边框 border-radius: 25px; // 边框阴影 四个参数:水平阴影位置,垂直阴影位置,模糊度 颜色 box-shadow: 10px 10px 5px #f