Question

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

我能想到的解决方案是同时显示背景图像和正面图像（因此背景褪色图像最初隐藏在主图像后面）。单击前面的图像后，通过jquery效果使其在不透明度下慢慢消失，甚至消失为背景图像。

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

非常感谢任何洞察力......

KG

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中的不透明度。这样的事情应该有效。

网页设计理念 - 单击图像使用jquery转换为背景图像？

2 个答案: