Увядание тела в javascript

Question

Я использую 'onclick' для просмотра изображения и текста. Теперь я хочу угаснуть фон.

document.body.style.opacity = 0,1;

Страница не исчезает и не меняется. Так что я делаю неправильно?

Полный файл JS является:

function changeImage() 

благодаря

Answer 1

opacityтело бирка изменит весь стиль страницы.

Возможно, вы захотите изменить только background image или color.

1. Цвет

Вы должны формат rgb для цвета 0,0,0, и просто добавить alpha, чтобы сделать его rgba.

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

2. Изображение

Вы должны pseudo element изменить непрозрачность, не затрагивая тела тег.

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

UPDATE

Если вам просто нужно наложение когда ваше изображение будет увеличено, , чем вы должны использовать оверлей элемент, как каждый лайтбоксе плагин.

Стиль наложения

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% ЯШИ:

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

in a fiddle

Анимация добавлены в скрипке, чтобы показать вам, как вы можете приглушить его и снаружи. Действительно, все это основано на этой простой идее.

ПРИМЕЧАНИЕ: чтобы избежать выцветания, вам необходимо установить непрозрачность на 1 на каждом этапе анимации.