jQuery使整个网站内容褪色，以显示背景图像

我有一个全尺寸背景图片的网站。我希望包括一个按钮或链接标题为“显示背景照片”，或类似的东西。单击后，整个页面将淡出，留下可见的背景图像，中间的另一个链接/按钮将淡入显示“显示页面内容”。一旦点击，就会在网站内容中淡出

希望这是有意义的。我发现了一个很好的例子： 我知道我可以从那个网站上窃取代码，但那是作弊，我也不理解

---

我是jQuery的新手，不确定从哪里开始编写代码。非常感谢。

您可能会让“显示照片”按钮设置图像的

z-index

CSS属性并关闭按钮，使其显示在所有其他网站内容之上。或者在主内容div上设置

display:none

，并将图像/按钮放在单独的div中

$('#showPhotoButton').click(function()
{
    $('div#mainContent').hide();
    $('#showPhotoButton').hide();
    $('#hidePhotoButton').show();
};

$('#hidePhotoButton').click(function()
{
    $('div#mainContent').show();
    $('#showPhotoButton').show();
    $('#hidePhotoButton').hide();
}

---

注意，我在这里遗漏了动画。这是一个起点，您可以查找并添加任何您喜欢的动画（或者在方法上使用jQuery的duration参数，或者可能）。

背景图像在哪里？关于身体元素本身？