将 body 淡入 javascript

Question

我正在使用 'onclick' 查看图片和文字。我现在想淡化背景。

document.body.style.opacity = 0.1;

页面没有褪色或变化。那我做错了什么？

完整的 JS 文件是：

function changeImage()

谢谢

Answer 1

我猜你真正想要的是让整个背景变暗，你可以通过在 css:

中添加几行简单的代码来实现

html {
    background-color: black;
}
body {
    background-color: white; /*<< or whatever it was previously,
                               but it has to have a color*/
}

现在它确实起作用了：http://jsfiddle.net/ru3pdqc7/1/

您可能希望将 margin: 0; 添加到您的正文中，以防止显示 html 的黑色边，如 demonstrated here。

或者，代替 css，100% js:

document.getElementsByTagName("html")[0].style.backgroundColor = "black";
document.body.style.backgroundColor = "white";
document.body.style.margin = 0;

in a fiddle

在 fiddle 中添加了动画，只是为了向您展示如何淡入淡出。真的，这一切都是基于那个简单的想法。

注意：为避免弹出窗口也淡出，您需要在动画的每个阶段将其不透明度设置为 1。

Answer 2

opacity body 标签将改变整个页面样式。

您可能只想更改 background image 或 color。

1.颜色

颜色 0,0,0 需要 rgb 格式，只需添加 alpha 即可使其成为 rgba.

document.body.style.backgroundColor = "rgba(0,0,0,.1);"

2。图片

您需要 pseudo element 来更改 opacity 而不影响 body 标签。

body {
  position: relative;
}

body:after {
  content: "";
  background: url(image.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

这里是fiddle

更新

如果您在图片放大时只需要 叠加层，比你应该使用覆盖元素，就像每个灯箱插件一样。

样式叠加

CSS

body {
    position: relative;
}
#overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.7); //choose opacity
    z-index: -1; // set z-index smaller than image and text
}

JS

if () {
    //Create element and append it to body.

    var page = document.body;
    var overlay = document.createElement('div');
    overlay.id = "overlay";
    page.appendChild(overlay);

} else {
    //Remove element

    var overlay = document.getElementById("overlay");
    overlay.parentNode.removeChild(overlay);
}

将 body 淡入 javascript

Fade the body in javascript

javascript

background

document

opacity