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

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/

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

你能告诉我我需要在测试用例中更改什么才能使更大的图像(代表 Sprite )可见吗？

Answer 1

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

使用这张图片。它有效。

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