网页设计理念--点击图片就可以使用jquery将图片转换为背景图片？

Question

我有了这个想法。在网页设计中，单击图像后，我希望它与背景合并(以一种被冲刷掉的水印的方式)。从本质上讲，它必须从img转到背景图像。使用jquery可以做到这一点吗？

我能想到的一种解决方案是同时显示背景图像和正面图像(因此背景淡出的图像最初隐藏在主图像的后面)。单击前面的图像后，通过jquery效果使其逐渐变得不透明，甚至消失为背景图像。

我希望这是有意义的？你有什么替代的建议来达到这个效果吗？

会非常感谢任何有见识的人。

千克

Answer 1

我看到的图像隐藏的预先制作的背景的唯一问题(顺便说一句，这是相当聪明的)是，你必须花很大的力气来确保图像与隐藏的背景完美地对齐。此外，预先制作背景图像也不是很灵活。如果你想添加更多的图片，等等怎么办？

我认为ryanulit的建议非常完美，但它假设你想要用点击的图片替换整个页面背景。如果我没看错的话，你想让图像成为已经存在的背景的一部分。

因此，您可以使用他的代码首先将img元素的高度和宽度设置为图像的高度和宽度，然后将图像的src设置为清晰的像素。

var clear_pixel = "images/empty.png";
$("#clicked_image").click( function() {
     var image_src = $(this).attr("src");
     $(this).css("height", $(this).height());
     $(this).css("width", $(this).width());
     $(this).css("background-image", "url(" + new_bg + ")");
     $("this").attr("src", clear_pixel).fadeTo(5000,1);
});

这样，当图像淡出到清晰的像素(或者可能稍微不透明的像素以添加整齐的水印色调)时，下面的新背景图像就会显露出来。

唯一的缺点是，图像并不是真正的背景的一部分，就像你所说的，它看起来只是身体背景的一部分，但实际上是图像背景。

如果你只是想要效果，我认为这应该行得通。如果您希望用户可以选择保存整个新的背景，那么您可能需要预先制作背景(或者使用一些非常棒的ajax和一个服务器端图像创建库)。

Answer 2

您只需将背景图像更改为所单击图像的src：

$("#clicked_image").click( function() {
     var new_bg = $(this).attr("src");
     $("body").css("background-image", "url(" + new_bg + ")").fadeTo(5000, 1);
     // EDIT: also to hide the original image
     $(this).hide();
});

其中5000 =5秒，1= fadeTo中的不透明度。像这样的东西应该行得通。