修改png格式,让IE6支持png图片透明
PNG8和PNG24以及PNG32的区别
个人觉得png8对应的是gif格式相同的效果，支持完全透明和完全不透明两种效果和256色，png8更小，目前很多大型门户网站开始使用png8来代替gif，但png8没有gif的动画效果png24支持24位色，图片质量很高，但Fireworks中的png24不支持Alpha透明通道，也就是FW中的png24不透明的，但在PS或者AI中导出的png24是支持Alpha透明的png32是FW中的支持Alpha通道的png图片PNG8和PNG24的区别/s/blog_9050e71e0100yvtf.html一个图需要透明，所以存为了PNG8格式，结果图片四周都变得有锯齿了，阴影也不见了，存为PNG24后，这些问题就消失了。
百度搜索了PNG8和PNG24的区别，原来PNG8要么完全透明，要么完全不透明（1位布尔通道），不支持半透明，PNG24则支持半透明的（8位alpha通道；256灰度级）：看新浪微博logo，遇到这个问题（想知道它用的什么格式的png图）。
1、.png8和png24的根本区别，不是颜色位的区别，而是存储的方式不同。
2、.png8只有1位透明通道（或全透明，或全不透明），png24则有8位（256阶）透明通道（可半透明）。
3、png8和gif有相似之处，都只支持像素级的纯透明，但不支持alpha级的半透明。
4、通常说“IE6 不支持PNG 透明”，是指不支持PNG24的半透明。
但该版支持PNG8的透明，与支持gif透明一样。
因此，制作网页时：1、色彩丰富的大图片切成jpg；2、小尺寸，色彩单调，或背景透明的切成gif或png8；3、半透明的切成png24。
如何区别png8和png24：1、ps里看图像 模式，png8只有8位通道。
2、打开png8格式，ps会默认在其标题加上“索引”二字，而png24没有。
最后说下png透明ie6下的解决问题：新浪微博的logo（png24）采用了下面的方法来实现透明：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='cr op');但测试发现，给background:red url(logo.png) no-repeat center;加了红色后，别的浏览器正常识别，但ie6依旧不识别。
Photoshop9.0CS2制作PNG透明背景图片方法
Photos hop做透明背景图片必须用另存为we b所有格式(ctrl+alt+shift+s).还可以用他的Ima geRad yle 这个保存的都是web格式的(上面存的都是gif格式)重要的是j pg格式是没有透明背景的透明背景的要么是gif格式要么就是png格式PS简单图标遮罩制作（透明背景图片）1 -在Phot oshop中打开PN G格式的图片2- 将前景颜色设置为黑色3 - 按键（Alt）+（Shi ft）+（Backs pace）对存在像素上色（黑色）4 - 选择Layer（涂层）> Fla ttenImage（拼合图层）5- 按键（Ctrl）+（I）对图像取反色，将图片保存为BMP格式使图标边缘看起来更圆滑（无白边）（透明背景图片）1 - 在P hotos hop中打开PNG格式的图片2 -选择Lay er（涂层） > D uplic ate L ayer（复制图层）3 -选取位于最底层的涂层4- 选择F ilter（滤镜）> Othe r（其他）> Min imum（最小值）5 -将Radi us（半径）改为1如何利用Phot oshop输出带有透明信息的P NG格式的图片下面就是操作步骤：1.打开你要处理的图片(可以是任何格式的)，先调整它的尺寸大小，这一点虽然与透明背景图像没有什么联系，但图像太大会影响浏览速度，谁想只为了看一幅图片而“等你等得我心疼”呢！所以，在不影响视觉效果前提下应把图像尽量缩小，而且图像的长宽要和它在网页中的大小基本一致，否则图像插入后会发生变形。
调节尺寸可用I mage(图像)菜单中的Ima ge si ze(图像尺寸)命令。
网页上不显示PNG图片
(1)、使用开始->运行，在运行输入框中输入“regsvr32 c:\windows \system32\pngfilt.dll”（然后点击确定）注意，这个pngfilt.dll在有的系统中是在c:\windows\system 中的，要自己查看一下这文件在哪里，根据自己的系统修改一下路径。
如果在注册时出现“已加载c:\ windows\system32\pngfilt.dll，但没有找到DllRegisterSever 输入点。
无法注册这个文件”，则表明这个文件可能损坏了，你要去别的机子去Copy一个好的过来。
再进行一次注册。
(2)、有些人是因为自己系统的设置问题，即任意打开一个文件夹，在上方菜单上选择“工具”->“文件夹选项”->“文件类型”，选择下方的“还原”按钮。
(3)、开始-> 运行，在运行输入框中输入“Regedit”，到这个路径“HK EY_LOCAL_MACHINE＼SOFTWARE＼Microsoft ＼Windows＼C urrentVersion＼Internet Settings＼Accepted Documents”，在右边右键“新建”->“字符串值” 紧接着最大的数字命名，我这里是3，故命名为4，并赋值为“image/png”。
(4)、打开注册表[HKEY_CLASSES_ROOT＼MIME]，正常的情况下里面有几大项，不能打开png格式图片时仅有Database项。
正常情况下，Database项下有上百项，异常情况下只有三四项。
这事可以从别人正常的机子中（xp可以从vista中拷贝）拷来MIME项注册表在自己机子上导入。
有时是MIME权限出了问题（如空权限），只需全部删去再导入。
受限帐户(USERS组)在IE浏览器中无法显示png图片的解决办法(转自微软)在Windows XP Pro SP3系统+ IE7浏览器的运行平台下，IE7突然无法显示png格式图片，导致浏览网页的时候大量图片、验证码等无法显示，但是用管理员的账号登陆以后IE浏览器图片显示则一切正常。
阮一峰CSS使用技巧
阮一峰的网络日志»首页»档案上一篇：一封博士研究生的遗书下一篇：关于高晓松，以及其他的分类：开发者手册CSS使用技巧作者：阮一峰日期：2010年3月31日最近，我开始升级网志了。
在修改模板的过程中，需要重写CSS样式表。
正好看到有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。
未来，本文将持续更新。
1. 文字的水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可：text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {width:760px;margin:0 auto;}3. 文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。
比如，容器中有一行数字。
<div id="container">1234567890</div>然后CSS这样写：div#container {height: 35px; line-height: 35px;}如果有n行文字，那么将行高设为容器高度的n分之一即可。
4. 容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？<div id="big"><div id="small"></div></div>首先，将大容器的定位为relative。
div#big{position:relative;height:480px;}然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。
div#small {position: absolute;top: 50%;height: 240px;margin-top: -120px;}使用同样的思路，也可以做出水平居中的效果。
HTML基础知识
HTML学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。
HTML标记语言也不例外，同样需要遵从一定的规范。
接下来将具体讲解HTML文档的基本格式。
HTML文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html〉根标记、<head〉头部标记、<body〉主体标记,具体介绍如下：(1）<！DOCTYPE>标记<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或XHTML（可扩展超文本标记语言）标准规范，必需在开头处使用<！DOCTYPE〉标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。
（2)〈html〉〈/html〉标记〈html>标记位于〈!DOCTYPE〉标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档，<html>标记标志着HTML文档的开始，〈/html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
在〈html>之后有一串代码“xmlns=”/1999/xhtml"”用于声明XHTML统一的默认命名空间.（3）<head〉</head〉标记<head〉标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html〉标记之后，主要用来封装其他位于文档头部的标记，例如〈title〉、<meta>、〈link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
（4)〈body>〈/body〉标记<body〉标记用于定义HTML文档所要显示的内容，也称为主体标记.浏览器中显示的所有文本、图像、音频和视频等信息都必须位于〈body>标记内，<body>标记中的信息才是最终展示给用户看的.一个HTML文档只能含有一对<body>标记，且〈body>标记必须在〈html〉标记内，位于<head>头部标记之后，与〈head>标记是并列关系.在HTML页面中，带有“〈〉”符号的元素被称为HTML标记，如上面提到的〈html〉、〈head〉、<body〉都是HTML标记。
网页设计前端面试题
网页设计前端面试题网页设计前端面试题集合前端是网页设计过程中一个重要的组成部分，那么在面试网页设计师的时候，往往会遇到前端试题操作，以下是店铺为大家搜索整理的网页设计前端面试题集合，希望能给大家带来帮助!HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联内嵌外链导入区别：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的使用display2.3像素问题使用float引起的使用dislpay:inline -3px3.超链接hover 点击后失效使用正确的书写顺序link visited hover active4.Ie z-index问题给父级添加position:relative5.Png 透明使用js代码改6.Min-height 最小高度 !Important 解决’7.select 在ie6下遮盖使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)11.标签上title与alt属性的区别是什么?Alt 当图片不显示是用文字代表。
解决网页不兼容的问题
2013年度最新整理45个div+css兼容性问题与解决方案分类：CSS前端开发2013-03-01 16:41 16人阅读评论(0) 收藏举报1. 默认的内外边距不同问题：各个浏览器默认的内外边距不同解决：*{margin:0;padding:0;}2. 水平居中的问题问题：设置text-align: centerie6-7文本居中，嵌套的块元素也会居中ff /opera /safari /ie8文本会居中，嵌套块不会居中解决：块元素设置1、margin-left:auto;margin-right:auto2、margin:0 auto;3、<div align=”center”></div>3. 垂直居中的问题问题：在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。
例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中解决：给容器设置一个与其高度相同的行高line-height:与容器的height一样4. 关于高度问题问题：如果是动态地添加内容，高度最好不要定义。
浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框解决：1.设置overflow:hidden;2.高度自增height:auto!important;height:100px;5. IE6 默认的div高度问题：ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度解决：为这个容器设置下列属性之一1、设置overflow:hidden;2、设置line-height:1px;3、设置zoom:0.086. IE6 最小高度(宽度)的问题问题：ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
php处理png图片白色背景色改为透明色的实例代码
php处理png图⽚⽩⾊背景⾊改为透明⾊的实例代码先看下⾯⼀段代码，php 处理png图⽚⽩⾊背景⾊改为透明⾊function pngMerge($o_pic,$out_pic){$begin_r = 255;$begin_g = 250;$begin_b = 250;list($src_w, $src_h) = getimagesize($o_pic);// 获取原图像信息宽⾼$src_im = imagecreatefrompng($o_pic); //读取png图⽚print_r($src_im);imagesavealpha($src_im,true);//这⾥很重要意思是不要丢了$src_im图像的透明⾊$src_white = imagecolorallocatealpha($src_im, 255, 255, 255,127); // 创建⼀副⽩⾊透明的画布for ($x = 0; $x < $src_w; $x++) {for ($y = 0; $y < $src_h; $y++) {$rgb = imagecolorat($src_im, $x, $y);$r = ($rgb >> 16) & 0xFF;$g = ($rgb >> 8) & 0xFF;$b = $rgb & 0xFF;if($r==255 && $g==255 && $b == 255){imagefill($src_im,$x, $y, $src_white); //填充某个点的颜⾊imagecolortransparent($src_im, $src_white); //将原图颜⾊替换为透明⾊}if (!($r <= $begin_r && $g <= $begin_g && $b <= $begin_b)) {imagefill($src_im, $x, $y, $src_white);//替换成⽩⾊imagecolortransparent($src_im, $src_white); //将原图颜⾊替换为透明⾊}}}$target_im = imagecreatetruecolor($src_w, $src_h);//新图imagealphablending($target_im,false);//这⾥很重要,意思是不合并颜⾊,直接⽤$target_im图像颜⾊替换,包括透明⾊;imagesavealpha($target_im,true);//这⾥很重要,意思是不要丢了$target_im图像的透明⾊;$tag_white = imagecolorallocatealpha($target_im, 255, 255, 255,127);//把⽣成新图的⽩⾊改为透明⾊存为tag_whiteimagefill($target_im, 0, 0, $tag_white);//在⽬标新图填充空⽩⾊imagecolortransparent($target_im, $tag_white);//替换成透明⾊imagecopymerge($target_im, $src_im, 0, 0, 0, 0, $src_w, $src_h, 100);//合并原图和新⽣成的透明图imagepng($target_im,$out_pic);return $out_pic;}$o_pic = '1.png';$name = pngMerge($o_pic,'aaaa.png');print_r($name);补充：⽤PHP的GD库把图⽚的背景替换成透明背景之前写个功能⽤PHP把图⽚的背景弄成透明，之留下⽂字（⿊⾊的），我也在百度上找，也试过别⼈的代码。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
修改png格式，让IE6支持png图片透明
文/ 商企通-胡睿
网页设计人员对IE6肯定相当头疼，因为其不支持png图片透明，所以就需要用各种方法来实现让它支持png透明图片。
实现方法也相当的多，这里我推荐一种不需要其他插件，也不需要增加任何代码，只需你的电脑上有PS（photoshop）就可以实现。
下面我们就一步步来实现，首先在IE6和IE8下分别打开一个未被处理过的png图片看看效果：
，
这两张图片都是png格式，并且都为背景都为透明，可以很明显看出，IE6（左）不支持PNG图片透明。
接下来我们要做的就是，用PS打开其中一个png文件，然后依次点击“文件”--“存储为Web和设备所用格式”，快捷键是：Ctrl+Shift+Alt+S，打开后在右侧“预设”里设置：PNG-8 128 仿色
然后点击“存储”，选择存放路径，然后就OK了。
最后把这个修改过的png图片替换之前的文件，然后我们再在IE6里打开查看一下：
可以看到IE6下已经能显示透明了，但图片周围似乎还有一圈白色，这个应该是细节问题，由于我不太懂PS，所以细节就没有继续处理。
这里其实没什么原理，因为png有很多版本，比如有：png8，png24，png32，而IE6
只支持png8的透明索引，所以我们只需修改下png的格式就行，另外还需注意的就是，在FW（Fireworks）里，导出png图片的格式必须选png32，因为在FW里导出的png32图片在PS里打开是png24。
但png8有它的限制，不支持更多的颜色，而且如果在图片很多的情况下，如果手动去一张张修改，肯定很麻烦。
所以就下面简短的介绍一个简单而有效的办法，
那就是IE6专用的PNG hack——iepngfix.htc。
首先要下载脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插入的PNG图象显示为红色的叉叉。
然后在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’。
最后在css中将需要使用透明PNG的元素与.htc文件关联。
例如：*{behavior:
url(iepngfix.htc) }
通过以上三步，你的IE6就能支持图片透明了。
如果还不行，可以再修改下png图片格式为png8，这样就100%可行了。