莫相离 发表于 2015-1-16 00:03:21

来看看:网页重构时在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的地位)<divtitle="载体"style="width:440px;height:440px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bg.png);"></div>

[*]截取标签:界说此标签宽高与料想挪用背景部分地位巨细分歧,并埋没其溢出的部分。
<divtitle="截取"style="overflow:hidden;width:120px;height:120px;"></div>



[*]最初盘算出料想挪用背景部分地位的坐标,界说在载体标签中。
(背景部分地位坐标的调剂可用margin或position把持。上面以”I”为例)
margin
<divtitle="载体"style="margin:-80px00-120px;width:440px;height:440px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bg.png);"></div>
position
<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以上图片,年夜可用一般的体例导进背景及挪用坐标。但思索到终极目标及其可保护性,因此不往做高版本扫瞄器的惯例处置体例。

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

深爱那片海 发表于 2015-1-17 23:53:57

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

愤怒的大鸟 发表于 2015-1-26 15:13:06

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

金色的骷髅 发表于 2015-2-4 20:39:29

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

透明 发表于 2015-2-10 09:21:14

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

小女巫 发表于 2015-3-1 09:23:39

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

蒙在股里 发表于 2015-3-10 16:50:57

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

简单生活 发表于 2015-3-17 09:10:29

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

乐观 发表于 2015-3-24 05:29:50

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
页: [1]
查看完整版本: 来看看:网页重构时在IE6中碰到png兼容性