<![CDATA[琅驭怀喆'博客(LanivHaz's Blog)]]> http://www.yixo.com/blog/ zh-cn PBlog2 v2.4 琅驭怀喆'博客(LanivHaz's Blog) http://www.yixo.com/blog/images/logos.gif http://www.yixo.com/blog/ 琅驭怀喆'博客(LanivHaz's Blog) http://www.yixo.com/blog/default.asp?id=150 <![CDATA[三原色,颜色,名称,三元色,成份对照图表]]> yixo@qq.com(琅驭怀喆) Mon,07 Dec 2009 08:53:42 +0800 http://www.yixo.com/blog/default.asp?id=150

]]> http://www.yixo.com/blog/default.asp?id=149 <![CDATA[Flash播放器( Web HTML 控制版)]]> yixo@qq.com(琅驭怀喆) Sat,05 Dec 2009 16:51:41 +0800 http://www.yixo.com/blog/default.asp?id=149
程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>Flash Player</title>  
<script language="JavaScript">  
var movie,timer,step,total,state=null,delay=100  
function init(){//在 Flash 加载完成后初始化相关变量的函数  
/*捕获 id 为 movie 的对象，若要兼容NS，  
可用 window.document.movie 代替*/  
movie=document.getElementById("movie")  
//每 delay 毫秒执行一次 showStatus() 函数  
    timer=setInterval("showStatus()",delay)  
        total=movie.TotalFrames            //获取 Flash 的总帧数  
        step=total/50|0                    //快进快退时的步长  
    buttonState(false) //调用 buttonState() 函数，设置控制按钮可用  
     movie.width=Math.min(movie.TGetProperty("_level0",8),document.body.clientWidth-25)//设置 Flash 的宽  
//设置 Flash 的高  
    movie.height=movie.TGetProperty("_level0",9)  
}  

function Rewind(){  
        movie.Rewind()    //使 Flash 返回到第一帧  
}  

function Back(){//控制快退的函数  
//如果当前帧数不为 0 并且 Flash 不处于快进状态  
    if(movie.FrameNum!=0&&state!="forward"){  
        state="back"      //设置状态变量为 back  
        Quick()           //调用实现快进快退的 Quick() 函数  
// delay 毫秒后再次执行 Back() 函数，以实现不断快退的效果  
    setTimeout("Back()",delay)  
        }  
        else state=null   //快退完成后设置状态变量 state 为 null  
}  

function Play(){  
        movie.Play()  //播放 Flash  
}  

function Pause(){  
/*如果 Flash 正在播放，就调用 Flash 的 StopPlay() 方法使之停止播放，  
否则调用 Flash 的 Play() 方法使之播放*/  
    with(movie)IsPlaying()?StopPlay():Play()  
}  

function Stop(){  
        movie.StopPlay()        //停止播放 Flash  
}  

function Forward(){  
//如果当前帧数不在最后一帧并且 Flash 不处于快退状态  
    if(movie.FrameNum!=total-1&&state!="back"){  
        state="forward"   //设置状态变量为 back  
        Quick()           //调用实现快进快退的 Quick() 函数  
// delay 毫秒后再次执行 orward() 函数，以实现不断快进的效果  
    setTimeout("Forward()",delay)  
        }  
        else state=null   //快进完成后设置状态变量 state 为 null  
}  

function GoToEnd(){  
        movie.GoToFrame(total-1) //跳到 Flash 的最后一帧        
}  

function Replay(){  
        Rewind()   //使 Flash 返回到第一帧  
        Play()     //播放 Flash  
/*因为多数 Flash 都有一个停止的画面，让用户点击播放按钮后再播放，在  
delay*5 毫秒后执行 Play()，可以跳过那个画面(仅适用于部分 Flash)*/  
    setTimeout("Play()",delay*5)  
}  
function showStatus(){  
        var N=movie.FrameNum+1   //取得 Flash 当前播放到的帧数  
//根据 Flash 的播放进度设置 id 为 bar 的表格的宽度  
    bar.style.width=Math.round(N*100/total)+"%"  
//在 id 为 frameCount 的对象中显示当前帧数和总帧数  
    frameCount.innerText=N+"/"+total  
}  

function Quick(){  
//根据当前状态，计算快进或快退时将要跳转到的目标帧  
        var targetFrame=movie.FrameNum+step*{back:-1,forward:1}[state]  
        movie.GoToFrame(targetFrame)    //跳到目标帧  
}  

function selectMovie(){  
/*触发 id 为 moviefile 的上传控件的 Click (单击)事件，  
使之弹出"选择文件"对话框*/  
    document.getElementById("moviefile").click()  
}  

function loadMovie(){  
//取得触发本事件的对象的值(上传控件的内容)  
    var file=event.srcElement.value  
//通过判断所选择文件的扩展名是否为".swf"以实现简单的过滤  
    if(/\w\.swf$/.test(file)) {  
        movie.LoadMovie(0,file)  //加载 Flash 文件  
        loaded()                 //调用下载进度显示的函数  
        }  
//如果文件名为".swf"以外的，弹出警告说明  
    else alert("文件格式错误，请重新选择")  
}  

function buttonState(de){  
//捕获 id 为 ctlButtons 的对象内的所有标签名为 "button" 的对象  
    var buttons=ctlButtons.document.all.tags("BUTTON")  
//设置除"打开 Flash 文件"按钮以外的所有控制按钮的禁用状态  
    for(var i=0;i<buttons.length-1;i++)  
        buttons[i].disabled=de  
}  

function loaded(){  
//捕获 id 为 movie 的对象  
    var movie=document.getElementById("movie")  
        if(movie.PercentLoaded()==100)//如果 Flash 下载完成  
        init()        //调用初始化有关变量的函数 init()  
//否则在 delay 毫秒后再次执行 loaded() 函数  
    else setTimeout("loaded()",delay)  
//根据下载量显示 id 为 bar 的表格的宽度  
    bar.style.width=movie.PercentLoaded()+"%"  
        frameCount.innerText=bar.style.width   //显示下载百分比  
}  
</script>  
<style>  
body,td,button{font:normal 12px Tahoma;color:#333333;text-align:center}  
button{border:1px solid #333333;background:#EEEEEE;margin:2px;font-family:Webdings;height:20px}  
</style>  
</head>  
<body topmargin="0">  
<div style="border:1px solid #666666;padding:3px">  
<object id="movie" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" align="middle">  
<param name="allowScriptAccess" value="sameDomain" />  
<param name="movie" value="http://file.flash8.net/film/cn2001/snake/snake05.swf" />  
<param name="quality" value="high" />  
<param name="menu" value="false" />  
<param name="scale" value="noscale" />  
<param name="bgcolor" value="#000000" />  
<embed name="movie" src="http://file.flash8.net/film/cn2001/snake/snake05.swf" menu="false" quality="high" bgcolor="#000000" width="550" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>  
<table style="width:550px" cellspacing="0" cellpadding="0" border="0">  
        <tr>  
        <td style="vertical-align:middle">  
    <table style="border:1px solid #333333;width:100%;height:8px" cellpadding="1" cellspacing="0">  
               <tr>  
                  <td style="text-align:left;vertical-align:middle">  
                      <table cellspacing="0" cellpadding="0" id="bar" style="width:0%;height:5px;background:#00FF44">  
                         <tr>  
                             <td>  
                             </td>  
                         </tr>  
                      </table>  
                  </td>  
               <tr>  
           </table>  
        </td>  
        <td style="text-align:right;width:50px" id="frameCount"></td>  
       </tr>  
</table>  
<span id="ctlButtons">  
<button onClick="Rewind()" title="跳至第一帧">9</button>  
<button onClick="Back()" title="快退">7</button>  
<button onClick="Play()" title="播放">4</button>  
<button onClick="Pause()" title="暂停">;</button>  
<button onClick="Stop()" title="停止"><</button>  
<button onClick="Forward()" title="快进">8</button>  
<button onClick="GoToEnd()" title="跳至最末帧">:</button>  
<button onClick="Replay()" title="重放">q</button>  
<button onClick="selectMovie()" title="打开 Flash 文件">5</button><input type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()"></span>  
<script defer>  
buttonState(true)  //在 Flash 文件未下载完之前禁用控制按钮  
loaded()          //调用下载进度显示的函数  
</script>  
</div>  
</body>  
</html>  
]]> http://www.yixo.com/blog/default.asp?id=148 <![CDATA[CSS Hack 汇总快查]]> yixo@qq.com(琅驭怀喆) Sat,10 Oct 2009 11:10:41 +0800 http://www.yixo.com/blog/default.asp?id=148
屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px  !important;} /*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7与IE5.0可以识别
*+html  select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
仅IE7可以识别
*+html  select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
* html  select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同。
仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
仅IE5不识别，屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
盒模型解决方法
selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器，一般用不着
/*\*//*/
    @import "ie5mac.css";
/**/
IE的if条件Hack
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别

以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。

]]> http://www.yixo.com/blog/default.asp?id=147 <![CDATA[CSS Hack 汇总快查]]> yixo@qq.com(琅驭怀喆) Sat,10 Oct 2009 11:09:57 +0800 http://www.yixo.com/blog/default.asp?id=147
程序代码 程序代码
*:lang(zh) select {font:12px  !important;} /*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别
程序代码 程序代码

*+html  select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。


仅IE7可以识别
程序代码 程序代码

*+html  select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。


IE6及IE6以下识别
程序代码 程序代码

* html  select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同。

仅IE6不识别，屏蔽IE6
程序代码 程序代码
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

仅IE6与IE5不识别，屏蔽IE6与IE5
程序代码 程序代码
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

仅IE5不识别，屏蔽IE5
程序代码 程序代码
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。

盒模型解决方法
程序代码 程序代码
selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
程序代码 程序代码
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

截字省略号
程序代码 程序代码
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
程序代码 程序代码
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
IE5.x的过滤器，只有IE5.x可见
程序代码 程序代码
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

IE5/MAC的过滤器，一般用不着
程序代码 程序代码
/*\*//*/
    @import "ie5mac.css";
/**/

IE的if条件Hack
程序代码 程序代码
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别

以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。]]> http://www.yixo.com/blog/default.asp?id=146 <![CDATA[风与叶子]]> yixo@qq.com(琅驭怀喆) Thu,23 Jul 2009 16:28:10 +0800 http://www.yixo.com/blog/default.asp?id=146
Flash动画
在线播放
]]> http://www.yixo.com/blog/default.asp?id=145 <![CDATA[网页加载特定字体]]> yixo@qq.com(琅驭怀喆) Thu,02 Jul 2009 11:24:40 +0800 http://www.yixo.com/blog/default.asp?id=145 @font-face{
     font-family:方正少儿简体;
     font-style:normal;
     src:url(../dis_fun/line.ttf);
}

@font-face{font-family:name;src:url(url);sRules}

取值：
name：字体名称。任何可能的 font-family 属性的值
url(url)：使用绝对或相对 url 地址指定OpenType字体文件
sRules：样式表定义

]]> http://www.yixo.com/blog/default.asp?id=144 <![CDATA[DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性]]> yixo@qq.com(琅驭怀喆) Thu,05 Mar 2009 10:29:07 +0800 http://www.yixo.com/blog/default.asp?id=144
所有浏览器 通用
height: 100px;

IE6 专用
_height: 100px;

IE6 专用
*height: 100px;

IE7 专用
*+height: 100px;

IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.

1, !important (不是很推荐，用下面的一种感觉最安全)

随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

代码:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>

注意:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：

代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

代码:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧(相当有用)

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:

兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}


什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！

最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然IE7已经走向标准化，但还是有许多和FF不同的地方，所以需要用到IE7的兼容，有许多朋友问过IE7的兼容是什么，其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那片文章，《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。

有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容，例如：（适合新手，呵呵，高手就在这里路过吧。）

程序代码

第一个兼容，IE FF 所有浏览器 公用（其实也不算是兼容）
height:100px;
第二个兼容 IE6专用
_height:100px;
第三个兼容 IE6 IE7公用
*height:100px;

介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码，顺序不能错哦：

程序代码

height:100px;
*height:120px;
_height:150px;

下面我简单解释一下各浏览器怎样理解这三个属性：

在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;

在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;

在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

1 针对firefox ie6 ie7的css样式

现在大部分都是用!important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：

#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.兼容box{
display:table;
//将对象作为块元素级的表格显示
}

或者

.兼容box{
clear:both;
}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的

……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：

<div id=”box”>
<p>p对象中的内容</p>
</div>

CSS：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。

IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。

仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */

IE5/MAC的过滤器，一般用不着
/**//*/
@import "ie5mac.css";
/**/

下面是IE的条件注释，个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来非常方便，而且对于制作这个CSS本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写CSS如果把全部代码包括兼容都写到一个CSS文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS？还是先把主CSS里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选择了吧～～呵呵

IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。

div ul li 的嵌套顺序

今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面，里面是<ul>，然后再是<li>，当然<li>里面又可以嵌套<div>什么的，但是并不建议你嵌套很多东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是<div>里面放<li>，而不用<ul>的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。

具体嵌套写法

遵循上面得嵌套方式，<div><ul><li></li></ul></div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的IE6、和IE7、Firefox显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很完美了，不需要你通过调整大片的CSS来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！
]]> http://www.yixo.com/blog/default.asp?id=143 <![CDATA[正确了解PhotoShop图层模式]]> yixo@qq.com(琅驭怀喆) Sat,28 Feb 2009 11:14:52 +0800 http://www.yixo.com/blog/default.asp?id=143     　因为在PhotoShop中颜色是当作光线处理的(而不是物理颜料)，在Normal模式下形成的合成或着色作品中不会用到颜色的相减属性。例如，在Normal模式下，在100%不透明红色选择上面的50％不透明蓝色选择产生一种淡紫色，而不是混合物理颜料时所期望得上 到的深紫色。当增大蓝色选择的不透明度时，结果颜色变得更蓝而不太红，直到100％不透明度时蓝色变成了组合颜色的颜色。用Paintbrush I具以50％的不透明度把蓝色涂在红色区域上结果相同；在红色区域上描划得越多，就有更多的蓝色前景色变成区域内最终的颜色。于是，在Normal模式下，永远也不可能得到一种比混合的两种颜色成分中最暗的那个更暗的混合色了。


２、溶解模式（Dissolve模式）——溶解模式产生的像素颜色来源于上下混合颜色的一个随机置换值，与像素的不透明度有关。将目标层图像以散乱的点状形式叠加到底层图像上时，对图像的色彩不产生任何的影响。通过调节不透明度，可增加或减少目标层散点的密度。其结果通常是画面呈现颗粒状或线条边缘粗糙化。
     Dissolve模式当定义为层的混合模式时，将产生不可须知的结果。因此，这个模式最好是同Photoshop中的着色应用程序工具一同使用。U1ssQlve模式采用100％不透明的前景色(或采样的像素，当与Rubber Stamp工具一起使用时)，同底层的原始颜色交替以创建一种类似扩散抖动的效果。在Dissolve模式中通常采用的颜色或图像样本的不透明度越低，颜色 或祥本同原始图像像素散布的频率就越低。如果以小于或等于50％的不透明度描划一条路径，Dissolve模式在图像边缘周围创建一个条纹。这种效果对模拟破损纸的边缘或原图的“泼溅”类型是重要的。


３、变暗模式（Darken模式）——该模式是混合两图层像素的颜色时，对这二者的RGB值（即RGB通道中的颜色亮度值）分别进行比较，取二者中低的值再组合成为混合后的颜色，所以总的颜色灰度级降低，造成变暗的效果。显然用白色去合成图像时毫无效果。考察每一个通道的颜色信息以及相混合的像素颜色，选择较暗的作为混合的结果。颜色较亮的像素会被颜色较暗的像素替换，而较暗的像素就不会发生变化。
     在此模式下，仅采用了其层上颜色(或Darken模式中应用的着色)比背景颜色更暗的这些层上的色调。这种模式导致比背景颜色更淡的颜色从合成图像中去掉。

４、正片叠底模式（Multiply模式）——正片叠底模式。考察每个通道里的颜色信息，并对底层颜色进行正片叠加处理。其原理和色彩模式中的“减色原理”是一样的。这样混合产生的颜色总是比原来的要暗。如果和黑色发生正片叠底的话，产生的就只有黑色。而与白色混合就不会对原来的颜色产生任何影响。将上下两层图层像素颜色的灰度级进行乘法计算，获得灰度级更低的颜色而成为合成后的颜色，图层合成后的效果简单地说是低灰阶的像素显现而高灰阶不显现（即深色出现，浅色不出现），产生类似正片叠加的效果。（说明：黑色灰度级为0，白色灰度级为255）
    这种模式可用来着色并作为一个图像层的模式。MuItiply模式从背景图像中减去源材 料(不论是在层上着色还是放在层上)的亮度值，得到最终的合成像素颜色。在MuItiply模式中应用较淡的颜色对图像的最终像素颜色没有影响。 MuItiply模式模拟阴影是很捧的。现实中的阴影从来也不会描绘出比源材料(阴影)或背景(获得阴影的区域)更淡的颜色或色调的特征。用户将在本章中使用MuItiply模式在恢复的图像中对Lee加入一个下拉阴影。

５、颜色加深（Color Burn模式）——使用这种模式时，会加暗图层的颜色值，加上的颜色越亮，效果越细腻。让底层的颜色变暗，有点类似于正片叠底，但不同的是，它会根据叠加的像素颜色相应增加底层的对比度。和白色混合没有效果。
    除了背景上的较淡区域消失，且图像区域呈现尖锐的边缘特性之外，这种colo，Burn模式创建的效果类似于由MuItiply模式创建的效果。


６、线性颜色加深模式（Linear Burn模式）——同样类似于正片叠底，通过降低亮度，让底色变暗以反映混合色彩。和白色混合没有效果。

７、变亮模式（Lighten模式）——与变暗模式相反，变亮混合模式是将两像素的RGB值进行比较后，取高值成为混合后的颜色，因而总的颜色灰度级升高，造成变亮的效果。用黑色合成图像时无作用，用白色时则仍为白色。变亮模式。和变暗模式相反，比较相互混合的像素亮度，选择混合颜色中较亮的像素保留起来，而其他较暗的像素则被替代。
     在这种与Darken模式相反的模式下，较淡的颜色区域在合成图像中占主要地位。在层上的较暗区域，或在Lighten模式中采用的着色，并不出现在合成图像中。

８、屏幕模式（也叫滤色，Screen模式）——它与正片叠底模式相反，合成图层的效果是显现两图层中较高的灰阶，而较低的灰阶则不显现（即浅色出现，深色不出现），产生出一种漂白的效果。产生一幅更加明亮的图像。按照色彩混合原理中的“增色模式”混合。也就是说，对于屏幕模式，颜色具有相加效应。比如，当红色、绿色与蓝色都是最大值255的时候，以Screen模式混合就会得到RGB值为（255，255，255）的白色。而相反的，黑色意味着为0。所以，与黑色以该种模式混合没有任何效果，而与白色混合则得到RGB颜色最大值白色（RGB值为255，255，255）。
   Screen模式是Muliiply的反模式。无论在Screen模式下用着色工具采用一种颜色，还是对Screen模式指定一个层，源图像同背景合并的结果始终是相同的合成颜色或一种更淡的颜色。此屏幕模式对于在图像中创建霓虹辉光效果是有用的。如果在层上围绕背景对象的边缘涂了白色(或任何淡颜色)，然后指定层Screen模式，通过调节层的opacity设置就能 获得饱满或稀薄的辉光效果。


９、颜色减淡（Color Dodge模式）——使用这种模式时，会加亮图层的颜色值，加上的颜色越暗，效果越细腻。与Color Burn刚好相反，通过降低对比度，加亮底层颜色来反映混合色彩。与黑色混合没有任何效果。
     除了指定在这个模式的层上边缘区域更尖锐，以及在这个模式下着色的笔划之外， Color Dodge模式类似于Screen模式创建的效果。另外，不管何时定义color Dodge模式混合前景与背景像素，背景图像上的暗区域都将会消失。

10、线性减淡（Linear Dodge模式）——线性颜色减淡模式。类似于颜色减淡模式。但是通过增加亮度来使得底层颜色变亮，以此获得混合色彩。与黑色混合没有任何效果。

11、叠加模式（Overlay模式）——采用此模式合并图像时，综合了相乘和屏幕模式两种模式的方法。即根据底层的色彩决定将目标层的哪些像素以相乘模式合成，哪些像素以屏幕模式合成。合成后有些区域图变暗有些区域变亮。一般来说，发生变化的都是中间色调，高色和暗色区域基本保持不变。像素是进行Multiply（正片叠底）混合还是Screen（屏幕）混合，取决于底层颜色。颜色会被混合，但底层颜色的高光与阴影部分的亮度细节就会被保留。
    这种模式以一种非艺术逻辑的方式把放置或应用到一个层上的颜色同背景色进行混合，然而，却能得到有趣的效果。背景图像中的纯黑色或纯白色区域无法在Overlay模式下显示层上的Overlay着色或图像区域。背景区域上落在黑色和白色之间的亮度值同0ver1ay 材料的颜色混合在一起，产生最终的合成颜色。为了使背景图像看上去好像是同设计或文本一起拍摄的，Overlay可用来在背景图像上画上一个设计或文本。

12、柔光模式（Soft Light模式）--作用效果如同是打上一层色调柔和的光，因而被我们称之为柔光。作用时将上层图像以柔光的方式施加到下层。当底层图层的灰阶趋于高或低，则会调整图层合成结果的阶调趋于中间的灰阶调，而获得色彩较为柔和的合成效果。形成的结果是：图像的中亮色调区域变得更亮，暗色区域变得更暗，图像反差增大类似于柔光灯的照射图像的效果。变暗还是提亮画面颜色，取决于上层颜色信息。产生的效果类似于为图像打上一盏散射的聚光灯。如果上层颜色（光源）亮度高于50%灰，底层会被照亮（变淡）。如果上层颜色（光源）亮度低于50%灰，底层会变暗，就好像被烧焦了似的。如果直接使用黑色或白色去进行混合的话，能产生明显的变暗或者提亮效应，但是不会让覆盖区域产生纯黑或者纯白。
     Soft Light模式根据背景中的颜色色调，把颜色用于变暗或加亮背景图像。例如，如果在背景图像上涂了50％黑色，这是一个从黑色到白色的梯度，那着色时梯度的较暗区域变得更暗，而较亮区域呈现出更亮的色调。

13、强光模式（Hard Light模式）——作用效果如同是打上一层色调强烈的光所以称之为强光，所以如果两层中颜色的灰阶是偏向低灰阶，作用与正片叠底模式类似，而当偏向高灰阶时，则与屏幕模式类似。中间阶调作用不明显。正片叠底或者是屏幕混合底层颜色，取决于上层颜色。产生的效果就好像为图像应用强烈的聚光灯一样。如果上层颜色（光源）亮度高于50%灰，图像就会被照亮，这时混合方式类似于Screen（屏幕模式）。反之，如果亮度低于50%灰，图像就会变暗，这时混合方式就类似于Multiply（正片叠底模式）。该模式能为图像添加阴影。如果用纯黑或者纯白来进行混合，得到的也将是纯黑或者纯白。
   除了根据背景中的颜色而使背景色是多重的或屏蔽的之外，这种模式实质上同Soft Lishi模式是一样的。它的效果要比Soft Light模式更强烈一些，同Overlay一样，这种模式也可以在背景对象的表面模拟图案或文本。

14、亮光模式（艳光模式，Vivid Light模式）——调整对比度以加深或减淡颜色，取决于上层图像的颜色分布。如果上层颜色（光源）亮度高于50%灰，图像将被降低对比度并且变亮；如果上层颜色（光源）亮度低于50%灰，图像会被提高对比度并且变暗。
  
15、线性光模式（Linear Light模式）——如果上层颜色（光源）亮度高于中性灰（50%灰），则用增加亮度的方法来使得画面变亮，反之用降低亮度的方法来使画面变暗。

16、固定光模式（点光，Pin Light模式）——按照上层颜色分布信息来替换颜色。如果上层颜色（光源）亮度高于50%灰，比上层颜色暗的像素将会被取代，而较之亮的像素则不发生变化。如果上层颜色（光源）亮度低于50%灰，比上层颜色亮的像素会被取代，而较之暗的像素则不发生变化。

17、实色混合（强混合模式，Hard Mix模式）——PhotoShop CS 新增了一个称为“实色”的新混合模式，选择此模式后，该图层图像的颜色会和下一层图层图像中的颜色进行混合，通常情况下，当混合两个图层以后结果是：亮色更加亮了，暗色更加暗了，降低填充不透明度建立多色调分色或者阈值，降低填充不透明度能使混合结果变得柔和。实色混合模式对于一个图像本身是具有不确定性的，例如它锐化图像时填充不透明度将控制锐化强度的大小。
     新的“实色”混合模式产生招贴画式的混合效果，制作了一个多色调分色的图片，混合结果由红、绿、蓝、青、品红（洋红）、黄、黑和白八种颜色组成。混合的颜色由底层颜色与混合图层亮度决定（混合色是基色和混合色亮度的乘积）。

⒈通过调整图层来决定具体色调
⒉通过对灰度的调整或编辑来决定大致的阙值轮廓
⒊通过对原图的色彩调整来决定不同色调的分布（推荐用曲线调整不同的通道）

18、差值（差异模式，Difference模式）——作用时，将要混合图层双方的RGB值中每个值分别进行比较，用高值减去低值作为合成后的颜色。所以这种模式也常使用，例如通常用白色图层合成一图像时，可以得到负片效果的反相图像。根据上下两边颜色的亮度分布，对上下像素的颜色值进行相减处理。比如，用最大值白色来进行Difference运算，会得到反相效果（下层颜色被减去，得到补值），而用黑色的话不发生任何变化（黑色亮度最低，下层颜色减去最小颜色值0，结果和原来一样）。
     Difference模式使用层上的中间色调或中间色调的着色是最好不过的。这种模式创建背景颜色的相反色彩。例如，在Difference模式下，当把蓝色应用到绿色背景中时将产生一种 青绿组合色。此模式适用于模拟原始设计的底片，而且尤其可用来在其背景颜色从一个区域到另一区域发生变化的图像中生成突出效果。

19、排除模式（Exclusion模式）——Exclusion:与Difference作用类似，用较高阶或较低阶颜色去合成图像时与Difference毫无分别，使用趋近中间阶调颜色则效果有区别，总的来说效果比Difference要柔和。排除模式。和Difference类似，但是产生的对比度会较低。同样的，与纯白混合得到反相效果，而与纯黑混合没有任何变化。
这种模式产生一种比D1fference模式更柔和、更明亮的效果。无论是Difference还是 Exclusion模式都能使人物或自然景色图像产生更真实或更吸引人的图像合成。

20、色相（色调模式，Hue模式）——合成时，用当前图层的色相值去替换下层图像的色相值，而饱和度与亮度不变。决定生成颜色的参数包括：底层颜色的明度与饱和度，上层颜色的色调。
在这种模式下，层的色值或着色的颜色将代替底层背景图像的色彩。在使用此模式时想到Hue，Saturation，Brightness(HSB)颜色模式是有帮助的。Hue模式代替了基本的颜色成分迫不影响背景图像的饱和度或亮度。

21、饱和度模式（Saturation模式）——合成时，用当前图层的饱和度去替换下层图像的饱和度，而色相值与亮度不变。饱和度模式。决定生成颜色的参数包括：底层颜色的明度与色调，上层颜色的饱和度。按这种模式与饱和度为0的颜色混合（灰色）不产生任何变化。
     此模式使用层上颜色(或用着色工具使用的颜色)的强度(颜色纯度)，且根据颜色强度强调背景图像上的颜色。例如，在把纯蓝色应用到一个灰暗的背景图像中时，显出了背景中的原始纯色，但蓝色并未加入到合成图像中。如果选择一种中性颜色(一种并不显示主流色度的颜色)，对背景图像不发生任何变化。Saturation模式可用来显出图像中颜色强度已经由于岁月变得灰暗的底层颜色。

22、颜色模式（着色模式，Color模式）——兼有以上两种模式，用当前图层的色相值与饱和度替换下层图像的色相值和饱和度，而亮度保持不变。决定生成颜色的参数包括：底层颜色的明度，上层颜色的色调与饱和度。这种模式能保留原有图像的灰度细节。这种模式能用来对黑白或者是不饱和的图像上色。

23、亮度模式（明度模式，Luminosity模式）——合成两图层时，用当前图层的亮度值去替换下层图像的亮度值，而色相值与饱和度不变。决定生成颜色的参数包括：底层颜色的色调与饱和度，上层颜色的明度。该模式产生的效果与Color模式刚好相反，它根据上层颜色的明度分布来与下层颜色混合.
]]> http://www.yixo.com/blog/default.asp?id=142 <![CDATA[方正字库中英文对照表]]> yixo@qq.com(琅驭怀喆) Thu,26 Feb 2009 10:10:30 +0800 http://www.yixo.com/blog/default.asp?id=142
中文字体名 英文字体名 文件名 PS name 汉字数

方正报宋简体 FZBaoSong-Z04S FZBSJW FZBSJW—GB1-0 7156
方正粗圆简体 FZCuYuan-M03S FZY4JW   FZY4JW—GB1-0 7156
方正大标宋简体 FZDaBiaoSong-B06S   FZDBSJW   FZDBSJW—GB1-0 7156  
方正大黑简体 FZDaHei-B02S   FZDHTJW    FZDHTJW—GB1-0 7156
方正仿宋简体 FZFangSong-Z02S FZFSJW    FZFSJW—GB1-0 7156
方正黑体简体 FZHei-B01S FZHTJW    FZHTJW—GB1-0 7156
方正琥珀简体 FZHuPo-M04S FZHPJW    FZHPJW—GB1-0 7156
方正楷体简体 FZKai-Z03S FZKTJW   FZKTJW—GB1-0 7156
方正隶变简体 FZLiBian-S02S FZLBJW    FZLBJW—GB1-0 7156
方正隶书简体 FZLiShu-S01S FZLSJW    FZLSJW—GB1-0 7156
方正美黑简体 FZMeiHei-M07S FZMHJW   FZMHJW—GB1-0 7156  
方正书宋简体 FZShuSong-Z01S FZSSJW FZSSJW—GB1-0 7156  
方正舒体简体 FZShuTi-S05S FZSTJW FZSTJW—GB1-0 7152  
方正水柱简体 FZShuiZhu-M08S FZSZJW   FZSZJW—GB1-0 7156  
方正宋黑简体 FZSongHei-B07S FZSHJW    FZSHJW—GB1-0 7156  
方正宋三简体 FZSong III-Z05S FZS3JW FZS3JW—GB1-0 7156
方正魏碑简体 FZWeiBei-S03S FZWBJW    FZWBJW—GB1-0 7156
方正细等线简体 FZXiDengXian-Z06S FZXDXJW FZXDXJW—GB1-0 7156  
方正细黑一简体 FZXiHei I-Z08S FZXH1JW    FZXH1JW—GB1-0 7156  
方正细圆简体 FZXiYuan-M01S FZY1JW FZY1JW—GB1-0 7156  
方正小标宋简体 FZXiaoBiaoSong-B05S FZXBSJW   FZXBSJW—GB1-0 7156  
方正行楷简体 FZXingKai-S04S FZXKJW FZXKJW—GB1-0 7156
方正姚体简体 FZYaoTi-M06S FZYTJW   FZYTJW—GB1-0 7156
方正中等线简体 FZZhongDengXian-Z07S FZZDXJW FZZDXJW—GB1-0 7156
方正准圆简体 FZZhunYuan-M02S FZY3JW FZY3JW—GB1-0 7156
方正综艺简体 FZZongYi-M05S FZZYJW FZZYJW—GB1-0 7156
方正彩云简体 FZCaiYun-M09S FZCYJW FZCYJW—GB1-0 7156
方正隶二简体 FZLiShu II-S06S FZL2JW FZL2JW—GB1-0 7156
方正康体简体 FZKangTi-S07S FZKANGJW FZKANGJW—GB1-0 7156
方正超粗黑简体 FZChaoCuHei-M10S FZCCHJW FZCCHJW—GB1-0 7156
方正新报宋简体 FZNew BaoSong-Z12S FZNBSJW FZNBSJW—GB109 7156
方正新舒体简体 FZNew ShuTi-S08S FZNSTJW FZNSTJW—GB1-0 7156
方正黄草简体 FZHuangCao-S09S FZHCJW FZHCJW—GB1-0 6763
方正少儿简体 FZShaoEr-M11S FZSEJW FZSEJW—GB1-0 7156  
方正稚艺简体 FZZhiYi-M12S FZZHYJW FZZHYJW—GB1-0 7156
方正细珊瑚简体 FZXiShanHu-M13S FZXSHJW FZXSHJW—GB1-0 7156
方正粗宋简体 FZCuSong-B09S FZCSJW FZCSJW—GB1-0 7156
方正平和简体 FZPingHe-S11S FZPHTJW FZPHTJW—GB1-0 7156
方正华隶简体 FZHuaLi-M14S FZHLJW FZHLJW—GB1-0 7156
方正瘦金书简体 FZShouJinShu-S10S FZSJSJW FZSJSJW—GB1-0 7156
方正细倩简体 FZXiQian-M15S FZXQJW FZXQJW—GB1-0 7156
方正中倩简体 FZZhongQian-M16S FZZQJW FZZQJW—GB1-0 7156
方正粗倩简体 FZCuQian-M17S FZCQJW FZCQJW—GB1-0 7156
方正胖娃简体 FZPangWa-M18S FZPWJW FZPWJW—GB1-0 7156  
方正宋一简体 FZSongYi-Z13S FZSYJW FZSYJW—GB1-0 7156

(繁体部分)

中文字体名 英文字体名 文件名 PS name 汉字数  
方正报宋繁体 FZBaoSong-Z04T FZXLFW FZXLFW—GB1-0 6866  
方正彩云繁体 FZCaiYun-M09T FZCYFW   FZCYFW—GB1-0 6866  
方正超粗黑繁体 FZChaoCuHei-M10T FZCCHFW FZCCHFW—GB1-0 6866  
方正粗黑繁体 FZCuHei-B03T FZH4FW FZH4FW—GB1-0 6866  
方正粗圆繁体 FZCuYuan-M03T FZY4FW FZY4FW—GB1-0 6866  
方正大标宋繁体 FZDaBiaoSong-B06T FZDBSFW FZDBSFW—GB1-0 6866  
方正仿宋繁体 FZFangSong-Z02T FZFSFW FZFSFW—GB1-0 6866  
方正黑体繁体 FZHei-B01T FZHTFW FZHTFW—GB1-0 6866  
方正琥珀繁体 FZHuPo-M04T FZHPFW FZHPFW—GB1-0 6866  
方正楷体繁体 FZKai-Z03T FZKTFW FZKTFW—GB1-0 6866  
方正隶变繁体 FZLiBian-S02T FZLBFW FZLBFW—GB1-0 6866  
方正平黑繁体 FZPingHei-B04T FZPHFW FZPHFW—GB1-0 6866  
方正书宋繁体 FZShuSong-Z01T FZSSFW FZSSFW—GB1-0 6866  
方正舒体繁体 FZShuTi-S05T FZSTFW FZSTFW—GB1-0 6866  
方正魏碑繁体 FZWeiBei-S03T FZWBFW FZWBFW—GB1-0 6866  
方正细黑一繁体 FZXiHei I-Z08T FZXH1FW FZXH1FW—GB1-0 6866  
方正细圆繁体 FZXiYuan-M01T FZY1FW FZY1FW—GB1-0 6866  
方正小标宋繁体 FZXiaoBiaoSong-B05T FZXBSFW FZXBSFW—GB1-0 6866  
方正新书宋繁体 FZNew ShuSong-Z10T FZXSSFW FZXSSFW—GB1-0 6866  
方正新秀丽繁体 FZNew XiuLi-Z11T FZXXLFW   FZXXLFW—GB1-0 6866  
方正行楷繁体 FZXingKai-S04T FZXKFW    FZXKFW—GB1-0 6866  
方正幼线繁体 FZYouXian-Z09T FZYXFW FZYXFW—GB1-0 6866  
方正中楷繁体 FZZhongKai-B08T FZZKFW FZZKFW—GB1-0 6866  
方正准圆繁体 FZZhunYuan-M02T FZY3FW FZY3FW—GB1-0 6866  
方正综艺繁体 FZZongYi-M05T FZZYFW FZZYFW—GB1-0 6866  
方正隶二繁体 FZLiShu II-S06T FZL2FW FZL2FW—GB1-0 6866  
方正新舒体繁体 FZNew ShuTi-S08T FZNSTFW FZNSTFW—GB1-0 6866  
方正康体繁体 FZKangTi-S07T FZKANGFW FZKANGFW—GB1-0 6866  
方正水柱繁体 FZShuiZhu-M08T FZSZFW FZSZFW—GB1-0 6866  
方正姚体繁体 FZYaoTi-M06T FZYTFW FZYTFW—GB1-0 6866  
方正瘦金书繁体 FZShouJinShu-S10T FZSJSFW FZSJSFW—GB1-0 6866  
方正少儿繁体 FZShaoEr-M11T FZSEFW FZSEFW—GB1-0 6866  
方正稚艺繁体 FZZhiYi-M12T FZZHYFW FZZHYFW—GB1-0 6866  
方正细珊瑚繁体 FZXiShanHu-M13T FZXSHFW FZXSHFW—GB1-0 6866  
方正粗宋繁体 FZCuSong-B09T FZCSFW FZCSFW—GB1-0 6866  
方正平和繁体 FZPingHe-S11T FZPHTFW FZPHTFW—GB1-0 6866  
方正华隶繁体 FZHuaLi-M14T FZHLFW FZHLFW—GB1-0 6866  
方正中等线繁体 FZZhongDengXian-Z07T FZZDXFW FZZDXFW—GB1-0 6866  
方正细倩繁体 FZXiQian-M15T FZXQFW FZXQFW—GB1-0 6866  
方正中倩繁体 FZZhongQian-M16T FZZQFW FZZQFW—GB1-0 6866  
方正粗倩繁体 FZCuQian-M17T FZCQFW FZCQFW—GB1-0 6866  
方正胖娃繁体 FZPangWa-M18T FZPWFW FZPWFW—GB1-0 6866  
方正宋一繁体 FZSongYi-Z13T FZSYFW FZSYFW—GB1-0 6866


序号   字体中文名   字数   国标编码     西文名 中文名   PSName FileName  
1 方正卡通简体   7156 FZKaTong-M19S 方正卡通简体   FZKATJW--GB1-0 FZKATJW  
2 方正卡通繁体   6866 FZKaTong-M19T 方正卡通繁体   FZKATFW--GB1-0 FZKATFW  
3 方正艺黑简体   7156 FZYiHei-M20S 方正艺黑简体   FZYHJW--GB1-0 FZYHJW  
4 方正艺黑繁体   6866 FZYiHei-M20T 方正艺黑繁体   FZYHFW--GB1-0 FZYHFW  
5 方正水黑简体   7156 FZShuiHei-M21S 方正水黑简体   FZSHHJW--GB1-0 FZSHHJW  
6 方正水黑繁体   6866 FZShuiHei-M21T 方正水黑繁体   FZSHHFW--GB1-0 FZSHHFW  
7 方正古隶简体   7156 FZGuLi-S12S 方正古隶简体   FZGLJW--GB1-0 FZGLJW  
8 方正古隶繁体   6866 FZGuLi-S12T 方正古隶繁体   FZGLFW--GB1-0 FZGLFW  
9 方正小篆体 6866 FZXiaoZhuanTi-S13T 方正小篆体 FZXZTFW--GB1-0 FZXZTFW  
10 方正幼线简体   7156 FZYouXian-Z09S 方正幼线简体   FZYXJW--GB1-0 FZYXJW  
11 方正启体简体   7156 FZQiTi-S14S 方正启体简体   FZQTJW--GB1-0 FZQTJW  
12 方正启体繁体   6866 FZQiTi-S14T 方正启体繁体   FZQTFW--GB1-0 FZQTFW  
13 方正硬笔楷书简体 7156 FZYingBiKaiShu-S15S 方正硬笔楷书简体 FZYBKSJW--GB1-0 FZYBKSJW  
14 方正硬笔楷书繁体 6866 FZYingBiKaiShu-S15T 方正硬笔楷书繁体 FZYBKSFW--GB1-0 FZYBKSFW  
15 方正毡笔黑简体   7156 FZZhanBiHei-M22S 方正毡笔黑简体   FZZBHJW--GB1-0 FZZBHJW  
16 方正毡笔黑繁体   6866 FZZhanBiHei-M22T 方正毡笔黑繁体   FZZBHFW--GB1-0 FZZBHFW  
17 方正硬笔行书简体 7156 FZYingBiXingShu-S16S 方正硬笔行书简体 FZYBXSJW--GB1-0 FZYBXSJW  
18 方正硬笔行书繁体 6866 FZYingBiXingShu-S16T 方正硬笔行书繁体 FZYBXSFW--GB1-0 FZYBXSFW

中文名 西文名 PS Name 文件名 字数  
方正剪纸简体 FZJianZhi-M23S FZJZJW—GB1-0 FZJZJW 7156  
方正剪纸繁体 FZJianZhi-M23T FZJZFW—GB1-0 FZJZFW 6866  
方正胖头鱼简体 FZPangTouYu-M24S FZPTYJW—GB1-0 FZPTYJW 7156  
方正铁筋隶书简体 FZTieJinLiShu-Z14S FZTJLSJW—GB1-0 FZTJLSJW 7156  
方正铁筋隶书繁体 FZTieJinLiShu-Z14T FZTJLSFW—GB1-0 FZTJLSFW 6866  
方正北魏楷书简体 FZBeiWeiKaiShu-Z15S FZBWKSJW—GB1-0 FZBWKSJW 7156  
方正北魏楷书繁体 FZBeiWeiKaiShu-Z15T FZBWKSFW—GB1-0 FZBWKSFW 6866  
方正祥隶简体 FZXiangLi-S17S FZXIANGLJW—GB1-0 FZXIANGLJW 7156  
方正祥隶繁体 FZXiangLi-S17T FZXIANGLFW—GB1-0 FZXIANGLFW 6866  
方正粗活意简体 FZCuHuoYi-M25S FZCHYJW—GB1-0 FZCHYJW 7156  
方正粗活意繁体 FZCuHuoYi-M25T FZCHYFW—GB1-0 FZCHYFW 6866  
方正流行体简体 FZLiuXingTi-M26S FZLXTJW—GB1-0 FZLXTJW 7156  
方正流行体繁体 FZLiuXingTi-M26T FZLXTFW—GB1-0 FZLXTFW 6866  
方正宋黑繁体 FZSongHei-B07T FZSHFW—GB1-0 FZSHFW 6866  
方正大黑繁体 FZDaHei-B02T FZDHTFW—GB1-0 FZDHTFW 6866  
方正隶书繁体 FZLiShu-S01T FZLSFW—GB1-0 FZLSFW 6866


]]> http://www.yixo.com/blog/default.asp?id=141 <![CDATA[CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法]]> yixo@qq.com(琅驭怀喆) Fri,20 Feb 2009 16:39:46 +0800 http://www.yixo.com/blog/default.asp?id=141 .test{    
  background:#000;    
  color:white;    
  width:200px;    
  position:absolute;    
  left:10px;    
  top:10px;    
   filter: Alpha(opacity=10);    
   -moz-opacity:.1;    
   opacity:0.1;    
}  

这里关键的是

CSS代码
filter: Alpha(opacity=10);    
   -moz-opacity:.1;    
   opacity:0.1;  
]]>