如果源设置为透明像素，则不显示图像标签背景图像

Question

在将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/

我真正想要做的是显示一个精灵，但是由于精灵图像将非常大，并且它将只在事件上显示，所以我使用image标记的src属性来显示初始图像。当事件发生时，我想用sprite替换该图像。为了实现这一点，我的想法是将源图像替换为透明像素并设置背景图像。但由于某些原因，背景图像没有显示出来。

您能告诉我需要在测试用例中进行哪些更改才能使较大的图像(表示精灵)可见？

Answer 1

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

使用此图像。它起作用了。

var transparentPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";

Answer 2

base64镜像不知何故已损坏，请参阅http://jsfiddle.net/David_Knowles/3SvJU/

var transparentPng = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";