0

在将 src 属性设置为透明像素后，我在 img 标签上显示背景图像时遇到了一些问题。

HTML：

<img class="test-class" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png">

CSS：

.test-class {
    border: 1px black solid;
    width: 256px;
    height: 256px;
}

JavaScript：

var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAE0lEQVR4XgXAAQ0AAABAMP1L38IF/gL+/AQ1bQAAAABJRU5ErkJggg==";
var spriteUrl = "url(http://upload.wikimedia.org/wikipedia/commons/9/9a/Google_Chrome_screenshot.png)"

// Why doesn't background image show?
$(".test-class").attr("src", transparentPng);

// It does show if src is set to a broken URL, though.
//$(".test-class").attr("src", "invalidurl");

$(".test-class").css("background-image", spriteUrl);

这是一个现场测试用例：http: //jsfiddle.net/rmjaD/1/

我真正想做的是显示一个精灵，但是由于精灵图像会非常大并且只会在事件中显示，所以我使用图像标签的 src 属性来显示初始图像。当事件发生时，我想用精灵替换该图像。为此，我的想法是用透明像素替换源图像并设置背景图像。但由于某种原因，背景图像没有显示出来。

你能告诉我我需要在测试用例中更改什么以使更大的图像（代表精灵）可见吗？

4

2 回答 2

1

您使用的图像似乎有问题。

使用此图像。有用。

var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";
于 2013-04-20T18:53:17.677 回答
1

base64 图像以某种方式损坏，请参阅http://jsfiddle.net/David_Knowles/3SvJU/

var transparentPng = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
于 2013-04-20T19:23:59.047 回答