image - 图像在IE 9+中变灰

image - 图像在IE 9+中变灰,第1张

我希望图像在IE 9 中变灰,当我悬停鼠标时显示原始

一切都运转良好,但事实是,当我悬停时,它会缩放图像

find code in below fiddle 

Fiddle

最佳答案:

1 个答案:

答案 0 :(得分:1)

缩放是由于你的jpg比你的svg(96×53)略大(105×58)。当jpg被<image>引用时,它会缩放以适合<image>的尺寸。这对于灰色图像可以正常工作,但对于悬停效果则失败。在悬停时,您为opacity:0设置了<image>,这样可以显示svg的背景。但是,背景图像不会缩放以适合尺寸,而是剪裁到您的svg尺寸。因此,规模的差异。

为了避免这些问题,我宁愿采用另一种方法来摆脱背景图像。您可以将原始彩色图像放在灰色图像下方。然后,灰色图像会遮挡彩色图像,直到悬停时不透明度设置为0:

<image x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />
<image class="gray" filter="url('#filtersPicture')" x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />

检查更新后的JSFiddle。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复