使用jQuery更改页面的背景

Question

如何使用jQuery调暗页面的背景？

我的jQuery代码看起来像这样。

$(document).ready(function(){       
      $("body").fadeTo(1000, 0.33);        
});

Answer 1

如果您“隐藏”页面的body，您将调整页面上的每个元素，因为每个元素根据定义是{{1元素。特别是如果你使用不透明度（如body那样）。

如果你只想调暗fadeTo()元素的背景图像，我建议在页面内容周围包裹另一个元素，并使用部分透明的body作为背景图像对于该元素，或使用.png背景色。

1. JS Fiddle background-color proof-of-concept。
2. JS Fiddle background-image proof-of-concept。

Answer 2

你可以创建一个覆盖身体的div标签，将其背景颜色设置为黑色，不透明度为0,7，减少身体的不透明度将改变所有元素的不透明度;

  $('#cover').fadeIn(1000);

Answer 3

使用jquery插件

检查这个对图像的好处

http://jobyj.in/adipoli/#demo