背景图像不透明度问题

Question

我现在正在制作主页，但遇到一些问题。

我将背景图像设置为覆盖在体内：

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

现在，我希望使用javascript将整个身体标签的不透明度更改为0。

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

除了背景图像，一切都消失了，尽管它在人体标签中？ 有任何想法吗？

UPDATE！ 我将“问题站点”上传到了网络空间。 网站

只需单击“查询”，然后单击任意框，然后按Enter即可调用js函数。

谢谢！！

Answer 1

我对您的可重现该问题的代码进行了摆弄。 代码可以简化为：

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

根本问题是，摆弄<body>元素的不透明度不会产生任何效果，除非您具有以下内容。 一个简单的解决方法是添加以下内容：

html{
    background-color: white;
}

更新的小提琴

Answer 2

无论出于什么原因（我似乎都找不到为什么的引用），在<body>标签上设置opacity:0或visibility:hidden对background-image没有影响。 它的背景图像元素肯定是body标签的子元素。 因此，您有两种选择：

在<body>内容周围添加包装器<div> ：

您目前所在的位置：

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

更改为：

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

并将主体上的CSS移至#wrapper以及任何以Javascript / jQuery为目标的主体

在HTML元素上设置不透明度

无论您在哪里设置opacity:0 ，都可以在<html>元素上进行。

就个人而言，我建议第一种选择。

背景图像不透明度问题

问题描述

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