0

我在这个站点上找到了这个脚本，它有助于在 IE 中淡入/淡出透明 .png，而在淡入淡出效果期间透明部分被黑色填充：

var i;
  for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

这个脚本是由这个 stackoverflow 用户创建的，它在我的网站上运行良好。但是，我想稍微修改一下。此脚本在我的页面上查找所有 .png 文件并应用过滤器。但是，这可能会导致性能问题，因为我的网站上有许多透明的 .png 文件，但我只需将此过滤器应用于其中一个。它是一个固定位置的菜单 DIV 背景图像，在页面滚动时使用 jQuery 淡入淡出。

有人可以帮我修改这个脚本，以便我可以只为它提供一个图像或使用 getElementById("menu") 并让它应用这个过滤器。我尝试过的任何方法似乎都不起作用，并且将过滤器放入我的 CSS 中也不起作用，因此 javascript 方式似乎是要走的路。我只需要在一个.png 上使用它，而不是全部。

请记住，这是 div #menu 的背景图像，因此图像本身没有 ID，当然 div 有。任何帮助将不胜感激。

4

1 回答 1

0

根据规范，document.images返回img元素的集合，所以如果它是background-image，那将不起作用。但是，如果它是img在后台使用的，它将起作用。如果您只是要将其应用于您知道 ID 的图像，那么它将是

function applyFilterToImageById(id) {
    var i,
        parentElement = document.getElementById(id);
    for (i in parentElement.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}
于 2012-10-04T20:51:45.247 回答