关于浊色(不饱和色)

机构：天津先锋科教时间：2016-02-05 22:25:18 点击：586

从图中我们看到，“2009”垂直排列在右侧。用Firebug查看元素，文本“2009”出现在html结构之中，本文介绍实现这种效果的两种方法。

一、利用Sprite技术来实现

其实现过程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了详细介绍，这里把其实现过程作一个简单的描述。很显然，我们不希望每一个日期用一张单独的图片，因此，将其整合到一张图片之上，安排年、月、日在图片的不同区域，如图：

1、Html

页面中html结构如下：

Jun

2009

.postdate容器包含三个区域，分别对应年月日，这样很好的保证了语义上的完整性。

在类似wordpress这样的CMS系统中，其后端代码是这样的：

2、Css

css是sprite真正发挥作用的地方，利用html中的定义的class属性，让对应的图片得以显示。

首先，让class属性为.postdate的容器相对定位，这样包含其中的三个区域就会绝对定位，并使用同一张背景图片。设置各自的宽度和高度，并将文字移出以显示背景图片。

然后，定义每个月(12)、每天(31)、每年(按10年计)具体的背景位置，以显示与其相对应的图片。

.postdate {

position: relative;

width: 50px;

height: 50px;

float: left;

}

.month, .day, .year {

position: absolute;

text-indent: -1000em;

background-image: url(/wp-content/themes/ljq/images/dates.png);

background-repeat: no-repeat;

}

.month { top: 2px; left: 0; width: 32px; height: 24px;}

.day { top: 25px; left: 0; width: 32px; height: 25px;}

.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01 { background-position: 0 4px;}

.m-02 { background-position: 0 -28px;}

.m-03 { background-position: 0 -57px;}

... more like this ...

.d-01 { background-position: -50px 0;}

.d-02 { background-position: -50px -31px;}

.d-03 { background-position: -50px -62px;}

... more like this ...

.y-2006 { background-position: -150px 0;}

.y-2007 { background-position: -150px -50px;}

.y-2008 { background-position: -150px -100px;}

... more like this ...

关于浊色大家认识多少?

有人说是不纯净的颜色，有的人根本就没这个概念，有的人说是设计师的颜色。那他究竟是什么呢?我个人的理解可以从两方面来诠释它：

(1)从拾色器上解析，看下图：

(以色相为红色做图例)

红色+白色它的亮度越来越高，红色+黑色它的亮度越来越暗，这个是属于垂直色，只是单独加入白或黑来调整红色的明暗。注：黑、白是无彩色

红色+白+黑混杂在一起，可以看成从红色那个颜色的端点向左下角散发出来，红色加黑白混杂在一起形成不饱和的红色(颜色)，我把它定义为浊色(相关其他地方的说法是不饱和的颜色或纯度不高的颜色)。

(2)从画水粉(水彩)方面解析

高中时期学美术，考美术相关的大学，必须考的一课就是水粉画。画水粉画的必须工具和物料：画笔、水粉纸、调色盘、水粉颜料(颜色有很多种，把人们熟悉的7种色彩、黑白，2种或以上调和了不同的中间色，看具体有多少颜色见文章最下面的小知识部分)。以上废话不多说了。一般水粉颜料混杂4种以上，或加白色、黑色，外加水的分量(因为水粉颜料本身的特质需要加清水稀释来作画)，等等因素都会降低一种颜色的纯度，使其变得浑浊，颜料叠加越多，越混沌不堪，调和的颜色越发显得脏。画过画的人都知道当每次去洗调色板的时候那个水都是灰色的以无法很明确的辨别是偏向什么色相的颜色，剩下的只是浑浊的没有用处的脏水。

结合实例分析：