Webdesign理念-使用jquery单击图像可转换为背景图像？

我有这个想法。在网页设计中，单击图像后，我希望它与背景合并（以一种褪色水印的方式）。基本上，从img，它必须转到背景图像。使用jquery可以做到这一点吗

我能想到的一个解决方案是让背景图像和前面的图像最初都显示出来（因此背景被洗掉的图像最初隐藏在主图像后面）。单击正面图像后，通过jquery效果使其在不透明度中慢慢淡出，甚至消失为背景图像

我希望这是有意义的？你有其他的建议来达到这个效果吗

将非常感谢您的任何见解

---

KG

您只需将背景图像更改为单击图像的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中的不透明度。像这样的东西应该可以用。

我看到的图像隐藏的预先制作的背景的唯一问题（顺便说一句，这很聪明），就是你必须竭尽全力确保图像与隐藏的背景完美对齐。另外，预先制作背景图像也不是很灵活。如果您想添加更多图像等，该怎么办

我认为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和服务器端图像创建库）。

是的，听起来您已经准备好了。它只是jQuery（“#someImage”）.fadeTo（毫秒，0.0）。此外，为了提高代码的效率，您可以将对$（this）的引用存储在一个变量中，然后为css更改和属性调用引用该变量。然后只引用DOM一次。