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/

我真正想要做的是显示一个精灵，但由于精灵图像非常大并且只会在事件上显示，我使用图像标记的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";

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

2 个答案: