全国服务热线:4008-888-888

技术知识

CSS处理计划方案:IE6中遇到png适配性


把情况照片如常的合拼,运用类似于情况座标的方法启用部分照片部位。最大差别在于各自界定了两个不经意义的标识。
为考虑客户的视觉效果追求完美及商品的情况照片的换肤作用,设计方案师免不了在设计方案上会用到半全透明的实际效果。因而网页页面重构师根据视觉效果及商品的必须,选用了PNG32的半全透明照片复原设计方案稿。
但在IE6中遇到png适配性,及其拓宽的种种难题。如:
    png32的照片上在IE6有适配性难题,本来的全透明显示信息的情况可能无效。 在难题1的基本上,对于IE6选用了CSS滤镜让其全透明,但照片不可以运用情况座标精准定位的方法只能单张应用,这做法不好于带宽总流量和恳求连接数之余也不好款式的管理方法 在难题2的基本上,代表着要把png照片单张激光切割,并单张运用CSS滤镜

对于以上难题重构师的处理方法以下
把情况照片如常的合拼,运用类似于情况座标的方法启用部分照片部位。最大差别在于各自界定了两个不经意义的标识。 1个标识做为仿真模拟情况的载体标识:界定1个做为载体的标识,对于IE6以滤镜的方式导入照片,宽高与情况1致。 另外一个标识做为截取情况部分部位的截取标识:界定此标识宽高与料想启用情况部分部位尺寸1致,并掩藏其外溢的部分。 最终测算出料想启用情况部分部位的座标,界定在载体标识中。
HTML构造以下:
<div title="载体">
<div title=”截取”></div>
</div>

以便清楚的反映HTML构造,给标识加上了title特性,加以表明。
完成流程(分3步):
1、载体标识:界定1个做为载体的标识,对于IE6以滤镜的方式导入照片,宽高与情况1致。(留意:滤镜照片相对路径相对网页页面,而并不是CSS的部位)
<div title="载体" style="width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>

上1页12 下1页 阅读文章全文


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服