背景图像不透明度问题

Question

I am working on a Homepage right now, and got a few Problems. 我现在正在制作主页，但遇到一些问题。

I got a Background-Image set to Cover in the Body: 我将背景图像设置为覆盖在体内：

body{
    opacity: 1;
    transition:opacity 0.5s ease-out;
    background-image: url(Background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Now I want that to change the opacity of the whole body-tag to 0 with javascript. 现在，我希望使用javascript将整个身体标签的不透明度更改为0。

$("body").css("opacity", "0");

Everything disappears except the background-image, although it's in the body-tag? 除了背景图像，一切都消失了，尽管它在人体标签中？ Any Ideas? 有任何想法吗？

UPDATE!! UPDATE！ I uploaded the "problem-site" to a webspace. 我将“问题站点”上传到了网络空间。 Website 网站

Just click on "Query" than click in any box and press ENTER to call the js-function. 只需单击“查询”，然后单击任意框，然后按Enter即可调用js函数。

Thanks!! 谢谢！！

Answer 1

I've made a fiddle with your code that reproduces the issue. 我对您的可重现该问题的代码进行了摆弄。 Code can be simplified into this: 代码可以简化为：

body{
    opacity: 0.1;
    background-color: red;
}

The root issue is that fiddling with the opacity of the <body> element doesn't have any effect unless you have something below. 根本问题是，摆弄<body>元素的不透明度不会产生任何效果，除非您具有以下内容。 A simple fix is to add this: 一个简单的解决方法是添加以下内容：

html{
    background-color: white;
}

Updated fiddle 更新的小提琴

Answer 2

For whatever reason (I can't seem to find any references to why), setting opacity:0 or visibility:hidden on the <body> tag has no effect on the background-image . 无论出于什么原因（我似乎都找不到为什么的引用），在<body>标签上设置opacity:0或visibility:hidden对background-image没有影响。 It definitely has an effect an element with a background-image that is a child of the body tag. 它的背景图像元素肯定是body标签的子元素。 So you have two options: 因此，您有两种选择：

Add a wrapper <div> around the <body> content : 在<body>内容周围添加包装器<div> ：

Where you currently have: 您目前所在的位置：

<body>
    <!-- Content -->
</body>

Change this to: 更改为：

<body>
    <div id="wrapper">
        <!-- Content -->
    </div>
</body>

And move the CSS on body to #wrapper as well any Javascript/jQuery targeting body 并将主体上的CSS移至#wrapper以及任何以Javascript / jQuery为目标的主体

Set the opacity on the HTML element 在HTML元素上设置不透明度

Wherever you are setting opacity:0 , do it on the <html> element instead. 无论您在哪里设置opacity:0 ，都可以在<html>元素上进行。

Personally, I'd recommend the first option. 就个人而言，我建议第一种选择。

背景图像不透明度问题

问题描述

2 个解决方案

解决方案1
4 已采纳 2013-10-16 16:05:20

解决方案2
0 2013-10-16 16:01:59

背景图像不透明度问题

问题描述

2 个解决方案

解决方案1 4 已采纳 2013-10-16 16:05:20

解决方案2 0 2013-10-16 16:01:59

解决方案1
4 已采纳 2013-10-16 16:05:20

解决方案2
0 2013-10-16 16:01:59