在IE流览器中正确显示PNG透明图片
所属分类:
网页制作 / CSS
阅读数:
1768
收藏 0赞 0分享
png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!
但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。
解决这个的方法是增加javascript。具体方法如下:
把下面的代码放在head区就可以解决问题了。
<scriptlanguage="javascript">
functioncorrectPNG()
{
for(vari=0;i<document.images.length;i )
{
varimg=document.images[i]
varimgName=img.src.toUpperCase()
if(imgName.substring(imgName.length-3,imgName.length)=="PNG")
{
varimgID=(img.id)?"id='" img.id "'":""
varimgClass=(img.className)?"class='" img.className "'":""
varimgTitle=(img.title)?"title='" img.title "'":"title='" img.alt "'"
varimgStyle="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
varstrNewHTML="<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>
也可以把这段代码单独加在一张图片上:
<span
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');"></span>
css实现的让图片垂直居中的方法
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
收藏 0赞 0分享
3个比较有用的网页制作技巧
我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 “顶级”CSS技巧!虽然没有什么新意,但对新手而言却非常重要!
收藏 0赞 0分享
display:inline的用法
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
收藏 0赞 0分享
css样式实现整个页面背景使用一张图片
最近一直被css背景困扰,因为是仿站,别人网站背景图片无论怎样另存,都是相同文件名,打开一看,整个网站的各个角落背景图片都在一个文件中分布,于是上网搜集资料,发现使用这种方法的网站很多,源自于雅虎最早。
收藏 0赞 0分享
关于CSS样式表文件组织形式的整理
以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。
收藏 0赞 0分享
查看更多