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

Question

I'm having some trouble displaying a background image on an img tag after setting the src attribute to a transparent pixel.

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

Here's a live test case: http://jsfiddle.net/rmjaD/1/

What I really want to do is show a sprite, but since the sprite image will be pretty large and it will only be displayed on an event, I'm using the src attribute of the image tag to show an initial image. When the event happens, I want to replace that image with the sprite. To achieve this, my idea is to replace the source image with a transparent pixel and set the background image. But for some reason the background image is not showing up.

Can you tell me what I need to change in the test case to make the larger image (representing the sprite) visible?

Answer 1

There seems to be something wrong with the image you are using.

Use this image. It works.

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