javascript - 如何使用 JS 或 CSS 添加透明层

Question

我有一个 DIV，它使用动态生成的外部(我无法控制此图像)源图像。它使用白色背景图像。我想即时将其转换为透明背景。

到目前为止，我使用“opacity:0.5”作为 CSS 规则使其部分透明，代价是使图像中显示的数据也透明。有没有更好的方法将白色像素更改为透明像素？

我不希望仅将 jquery 用于这一项任务，并且将此 div 重写为 Canvas 是不可取的，因为我将有问题的图像视为 sprite 贴图....因此我可以即时 trim 它只显示所需的部分。

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";

Answer 1

您可以使一个像素透明(使用 photoshop 或其他软件)，然后在制作一个 div 后悬停 div 以 mask 您的像素作为背景重复例如我已经使用它，如果您愿意，您可以使用它:http://www.spar.fr/charte/base/fond_popUp.png

在你可以使用 hover with css 之后