js去除png格式的图片阴影

借用一句话：

PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!

但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

针对以上问题，IE浏览器本身提供了filter(滤镜)的CSS, 可以用来控制背景色。透明呀，模糊呀等等。

基于这个思想可以使用直接设置CSS和使用JS设置CSS两条路径来达成。

原始样式(如对应png图片没找到，可以随意替换一个试试)

<img src="http://online.sccnn.com/icon/1130/pin_001.png"/>

1. 直接定义CSS

<span
style="width:512px;height:512px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://online.sccnn.com/icon/1130/pin_001.png',sizingMethod='scale');">
</span>

这里要定义 width 和 height, 否则无法显示。

2. 使用js设置CSS

<script>
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";var imgStyle = "display:inline-block;" + myImage.style.cssText;var strNewHTML = "<span " + imgID + imgClass + imgTitle     + " style=\"" + "width:" + myImage.width     + "px; height:" + myImage.height     + "px;" + imgStyle + ";"     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"     + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";myImage.outerHTML = strNewHTML;
}
}
<img οnlοad="fixPNG(this)" src="http://online.sccnn.com/icon/1130/pin_001.png"/>
</script>

完整的HTML如下：

<HTML>
<HEAD>
<TITLE> Png Image </TITLE>
<script>
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";var imgStyle = "display:inline-block;" + myImage.style.cssText;var strNewHTML = "<span " + imgID + imgClass + imgTitle     + " style=\"" + "width:" + myImage.width     + "px; height:" + myImage.height     + "px;" + imgStyle + ";"     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"     + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";myImage.outerHTML = strNewHTML;
}
}
</script>
</HEAD><BODY>
<img src="http://online.sccnn.com/icon/1130/pin_001.png"/>
<img οnlοad="fixPNG(this)" src="http://online.sccnn.com/icon/1130/pin_001.png"/>
<span
style="width:512px;height:512px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://online.sccnn.com/icon/1130/pin_001.png',sizingMethod='scale');">
</span></BODY>
</HTML>

js去除png格式的图片阴影相关推荐

js 下载Base64格式数据图片（兼容主流浏览器）
最近的工作内容和前端有关.需要做一个图片下载的功能,然而后台只提供了byte[] 类型的图片数据,并且返回给前端的是Base64格式图片数据.那么,就遇到了最严重的问题了:浏览器兼容. 展示图片的时 ...
vue中使用tiff.js展示tif格式的图片
1.先下载依赖tiff.js npm install tiff.js 2.在组件中引用tiff.js import Tiff from 'tiff.js' 3.点击获取图片 if (file.raw. ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
python利用opencv去除图片logo_python 基于opencv去除图片阴影
一.前言如果你自己打印过东西,应该有过这种经历.如果用自己拍的图片,在手机上看感觉还是清晰可见,但是一打印出来就是漆黑一片.比如下面这两张图片: 因为左边的图片有大片阴影,所以打印出来的图片不堪入目 ...
three.js自定义材质切线空间及阴影
three.js自定义材质切线空间及阴影前言法线贴图中的法线向量定义在切线空间中,在切线空间中,法线永远指着正z方向.切线空间是位于三角形表面之上的空间:法线相对于单个三角形的本地参考框架.它就 ...
base64格式的图片数据如何转成图片
base64格式的图片数据如何转成图片一.总结一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. 1 // $base_img是获取到前端传递的值 2 $base_ ...
Highcharts JS去除Highcharts.com链接的方法
1.Highcharts JS去除Highcharts.com链接的方法在js文件中找到Credits,然后把enable的属性从!0改为0. 也可以更改为自己需要的: enabled:设置是否显示 ...
日期格式转换，正则匹配后转换；指定时间增加天数加转格式；js时间转换格式
指定时间增加天数加转格式,正则匹配: //申明需要的时间格式 SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss& ...
heic格式的图片h5显示
heic是啥 HEIC是iOS 11更新后,iPhone 7及其后硬件,在拍摄照片时的默认图像存储格式.与JPG相比,它占用的空间更小,画质更加无损.window10已经支持HEIC格式的图片查看.但 ...

js去除png格式的图片阴影

js去除png格式的图片阴影相关推荐

最新文章

热门文章