Question

我正在使用＆＃39; onclick＆＃39;查看图片和文字。我现在想要淡化背景。

document.body.style.opacity = 0.1;

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

完整的JS文件是：

function changeImage()

感谢

Answer 1

body 标记上的

opacity将改变整个页面样式。

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

1。颜色

您需要rgb格式的颜色0,0,0，只需添加alpha即可将其设为rgba。

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

2。图像

您需要pseudo element更改不透明度，而不会影响 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

<强>更新

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

样式叠加

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);
}

Answer 2

我猜你真正想要的是让整个背景变暗，你可以通过向你的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

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

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

用javascript淡化身体

2 个答案: