【发布时间】：2014-12-16 05:02:30
【问题描述】：
我有一个使用动态生成的外部（我无法控制此图像）来源图像的 DIV。它使用白色背景图像。我想即时将其转换为透明背景。
到目前为止，我使用 'opacity:0.5' 作为 CSS 规则以使其部分透明，但代价是使图像中显示的数据也透明。有没有更好的方法将白色像素更改为透明像素？
我不希望仅将 jquery 用于这一项任务，并且将此 div 重写为画布是不可取的，因为我将有问题的图像视为精灵图......所以我可以即时修剪它只显示所需的部分。
CSS：
#localweather {left:336px; top:661px; width:267px; height:46px}
#weatherbug {position:relative; margin:1.5px auto; border:1px solid black; height:27px; width:158px; border-radius:7px; opacity:0.5}
HTML：
<DIV CLASS='double' ID='localweather'>
<P CLASS='header'>Local Weather</P>
<DIV ID='weatherbug'></DIV>
</DIV>
JavaScript（每秒调用一次函数以更新整个页面的内容 - 仅限相关部分）：
document.getElementById('weatherbug').style.background = "url('http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_simplewhite&airportcode=KTTN&ForcedCity=Princeton&ForcedState=NJ&zip=08540&language=EN') repeat scroll -1px -24px transparent";
【问题讨论】：
-
能否分享相关代码？
-
@LcSalazar：适当地编辑我的问题以显示当前使用的 CSS、JS 和 HTML。
-
如果不进一步处理图像，就不可能做你想做的事。如果你能做到这一点，你可以轻松地使白色像素透明（如果它是 gif），或者使用 gd 库之类的东西在白色存在的地方添加 alpha 透明度。
-
@Phil_1984_：我也有同样的怀疑，但在确定超出语言能力之前，最好先咨询专家。
-
好吧，我不会完全排除它。当然，它可以使用带有自定义浏览器插件的自定义过滤器来实现 :) 但我当然没有听说过任何本机实现它的东西。浏览器对过滤器的支持仍然很糟糕。 caniuse.com/#feat=css-filters
标签： javascript css html