做过网页美工的朋友都知道，IE6 及更早版本不支持 PNG 的半透明效果，因此在设计的时候不能更灵活地运用一些元素和技巧，本人是搞开发的，偶尔也会涉及美工的东西，就像这个我的个人主页，我已经放弃对IE6 的兼容性支持了，IE6 总会有退出历史舞台的一天，不过看网站统计，客户端浏览器还是有近五成是IE6，不过一年前是八九成的。最近在网上发现一段 JS 代码，据说能让IE6 轻松支持 PNG 的半透明，先来看看：
<script language="javascript" type="text/javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>看了下代码，发现它只能对 <img> 标签里的 PNG 进行处理，而对 css 里的 PNG 背景无能为力，另外，对 <img> 的 src是引用 .aspx 等格式时也无效。
处理 css 中的 PNG 透明是这样的：
html>body .menublockmiddle{
background: url(../images/menu_block/menu_block_r1_c3.png) no-repeat;
}
* html .menublockmiddle{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src="../images/menu_block/menu_block_r1_c3.png");
}每个背景图都必须像这样写成两个，分别让IE和非IE识别，从而导引 css 异常烦琐，所以，虽然我们能完美解决 PNG 在 IE6 下的兼容性，但是这是美工的活，我已经放弃这么做了。
PNG半透明背景图片效果
PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。
IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
(X)HTML: <div id="wrap"> CSS:
<p><a href="http://www.jluvip.com"><strong>PNG半透明背景图片效果</strong></a><br />：PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出需要使用绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。</p>
<p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</p>
<p><a class="test" href="http://www.jluvip.com">这里是个超链接测试</a></p>#wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for ie 6.0*/
html>body #wrap{background: url(img/bgcanvas.png) repeat;}
/*for ie 6.0*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}
nbsp;
一般来说，我们在写博客或做网站时都需要对插图做一些效果，比如增加阴影、图片圆角、倒映等等。这些效果一般可以用3个方法实现，一是用PS实现对图片进行修改，二是使用CSS，三是使用JavaScript。使用PS会破坏原图，而且要花费一定的时间。Netzgesta上有很多实现图片特效的JavaScript提供下载，很多效果都是相当漂亮的。
1、水倒映
这个js将为图片添加水倒映的特效，时下web2.0站点很喜欢这种效果。
如果你喜欢在线生成水倒映效果，可以参考这里。
2、圆角+阴影
或许你记得用RoundPic能在线生成圆角图片，事实上用这个js也可以实现效果。
3、高光圆角阴影
这个效果可以用来做按钮。是我最喜欢的特效之一。
4、斜光阴影效果
和上面的效果看起来非常相似，但也有不同的地方。
5、相框效果
如果你在做图片博客，可以你会喜欢这个js，使用后博客文章内的图片都有相框的效果。
6、黑色相框
不喜欢白色没有立体感的相框，那试试这个立体感充足的js效果吧。
7、放大镜
一个很有趣的js，实现放大镜效果。记得在去年Google开发者日的时候，某个主讲人也有说到在GMaps里实现放大镜的有趣效果。具体效果点击这里。
8、菲林效果
如果你在写一个电影博客，这个效果或许会让你喜欢。
9、花边效果
很简单的图片花边效果。
10、翻页效果
翻页效果是很常见的，Google一下你会发现有很多相关的教程，如果你不想花时间去学，直接下载这个js吧。
安装使用方法：
将下载的压缩包解压之后上传到网站空间，然后在需要显示效果的head里添加代码，比如高光阴影效果Glossy，添加的代码是：
<script type="text/javascript" src="glossy.js"></script>
对于Wordpress，可以在header.php里添加。如果只要求文章页里出现效果，也可以考虑在single.php里添加。
然后，在想要显示特效的图片的<img>标记里添加：
class="glossy"
这样效果就出现了。
其它效果添加方法类似。
via BlogOhblog。
string chkCode = string.Empty;
//颜色列表，用于验证码、噪线、噪点
//Color[] color ={Color.White, Color.Yellow, Color.LightBlue, Color.LightGreen,
// Color.Orange, Color.LightCyan, Color.LightPink,
// Color.LightSalmon };
Color[] color = {Color.Black, Color.Blue, Color.Red, Color.DarkViolet,
Color.Chocolate, Color.DarkGreen, Color.DeepSkyBlue,
Color.DarkCyan };
//字体列表，用于验证码
string[] font = {"Times New Roman", "MS Mincho", "Book Antiqua", "Gungsuh",
"PMingLiU", "Impact" };
//验证码的字符集，去掉了一些容易混淆的字符
char[] character ={'2', '3', '4', '5', '6', '8', '9', 'A', 'B', 'C', 'D', 'E',
'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T',
'W', 'X', 'Y' };
Random rnd = new Random();
//生成验证码字符串
for (int i = 0; i < 4; i++)
{
chkCode += character[rnd.Next(character.Length)];
}
//把验证码存入session
Session["chkCode"] = chkCode;
Bitmap bmp = new Bitmap(65, 20);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.Transparent);//背景色
//画噪线
for (int i = 0; i < 0; i++)
{
int x1 = rnd.Next(65);
int y1 = rnd.Next(20);
int x2 = rnd.Next(65);
int y2 = rnd.Next(20);
Color clr = color[rnd.Next(color.Length)];
g.DrawLine(new Pen(clr), x1, y1, x2, y2);
}
//画验证码字符串
for (int i = 0; i < chkCode.Length; i++)
{
string fnt = font[rnd.Next(font.Length)];
Font ft = new Font(fnt, 15);
Color clr = color[rnd.Next(color.Length)];
g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr),
(float)i * 15 + 2, (float)0);
}
//画噪点
for (int i = 0; i < 50; i++)
{
int x = rnd.Next(bmp.Width);
int y = rnd.Next(bmp.Height);
Color clr = color[rnd.Next(color.Length)];
bmp.SetPixel(x, y, clr);
}
//清除该页输出缓存，设置该页无缓存
Response.Buffer = true;
Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);
Response.Expires = 0;
Response.CacheControl = "no-cache";
Response.AppendHeader("Pragma", "No-Cache");
//将验证码图片写入内存流，并将其以 "image/Png" 格式输出
MemoryStream ms = new MemoryStream();
try
{
bmp.Save(ms, ImageFormat.Png);
Response.ClearContent();
Response.ContentType = "image/Png";
Response.BinaryWrite(ms.ToArray());
}
finally
{
//显式释放资源
bmp.Dispose();
g.Dispose();
}