来看看：网页重构时在IE6中碰到png兼容性

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
网页教授教养中心提醒：为满意用户的视觉寻求及产物的背景图片的换肤功效，计划师不免在计划上会用到半通明的效果。因而页面重构师基于视觉及产物的必要，接纳了PNG32的半通明图片复原计划稿。
为满意用户的视觉寻求及产物的背景图片的换肤功效，计划师不免在计划上会用到半通明的效果。因而页面重构师基于视觉及产物的必要，接纳了PNG32的半通明图片复原计划稿。本文是网页教授教养www.poluoluo.com搜集收拾大概原创内容，转载请说明出处！
但在IE6中碰到png兼容性，及其延长的各种成绩。如：

• png32的图片上在IE6有兼容性成绩，底本的通明显现的背景将会生效。
  
• 在成绩1的基本上，针对IE6接纳了CSS滤镜让其通明，但图片不克不及使用背景坐标定位的体例只能单张利用，这做法倒霉于带宽流量和哀求链接数之余也倒霉款式的办理
  
• 在成绩2的基本上，意味着要把png图片单张切割，并单张使用CSS滤镜
  

针对以上成绩重构师的办理举措以下：
把背景图片如常的兼并，使用类似于背景坐标的体例挪用部分图片地位。最年夜区分在于分离界说了两个偶然义的标签。

• 一个标签作为摹拟背景的载体标签：界说一个作为载体的标签，针对IE6以滤镜的情势导进图片，宽高与背景分歧。
  
• 另外一个标签作为截取背景部分地位的截取标签：界说此标签宽高与料想挪用背景部分地位巨细分歧，并埋没其溢出的部分。
  
• 最初盘算出料想挪用背景部分地位的坐标，界说在载体标签中。
  

HTML布局以下：
<divtitle="载体">
<divtitle="截取"></div>
</div>
为了明晰的表现HTML布局，给标签增加了title属性，加以申明。
完成步骤(分3步)：

• 载体标签：界说一个作为载体的标签，针对IE6以滤镜的情势导进图片，宽高与背景分歧。
  (注重：滤镜图片路径相对页面，而不是CSS的地位)
  1. <divtitle="载体"style="width:440px;height:440px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bg.png);"></div>

  复制代码
  
  登录/注册后可看大图
  
  
• 截取标签：界说此标签宽高与料想挪用背景部分地位巨细分歧，并埋没其溢出的部分。
  

<divtitle="截取"style="overflow:hidden;width:120px;height:120px;"></div>

1. [/code]
2. 
   登录/注册后可看大图
3. [list=1]
4. [*]最初盘算出料想挪用背景部分地位的坐标，界说在载体标签中。
5. (背景部分地位坐标的调剂可用margin或position把持。上面以”I”为例)
6. [/list][b]margin[/b]
7. <divtitle="载体"style="margin:-80px00-120px;width:440px;height:440px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bg.png);"></div>
8. [b]position[/b]
9. [code]<divtitle="载体"style="position:absloute;top:-80px;left:120px;width:440px;height:440px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bg.png);"></div>

复制代码

登录/注册后可看大图

完成后的代码
<divtitle="截取"style="width:120px;height:120px;overflow:hidden;">
<divtitle="载体"style="margin:-80px00-140px;width:440px;height:440px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bg.png);"></div></div>
在FF与IE7等扫瞄器处置体例与IE6分歧，在这成绩已经做过思索是真的要为了IE6而IE6吗？由于别的高版本扫瞄器都撑持png32以上图片，年夜可用一般的体例导进背景及挪用坐标。但思索到终极目标及其可保护性，因此不往做高版本扫瞄器的惯例处置体例。

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

可以使用 CSS 检查工具进行设计。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。