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将整个body-tag的不透明度更改为0。

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

除了背景图片外，一切都消失了，虽然它在身体标签中？任何想法？

UPDATE !! 我上传了＆＃34;问题网站＆＃34;到网站空间。 Website

只需点击＆＃34;查询＆＃34;而不是单击任何框，然后按ENTER键调用js函数。

谢谢！

Answer 1

我已使用您的代码制作了a fiddle来重现该问题。代码可以简化为：

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

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

html{
    background-color: white;
}

Updated fiddle

Answer 2

无论出于何种原因（我似乎找不到任何原因），在opacity:0标记上设置visibility:hidden或<body>对background-image没有影响。它肯定有一个带有背景图像元素的元素，它是body标签的子元素。所以你有两个选择：

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

您目前的位置：

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

将其更改为：

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

将正文CSS移至#wrapper以及任何Javascript / jQuery定位正文

在HTML元素

上设置不透明度

无论您在何处设置opacity:0，请在<html>元素上执行此操作。

我个人推荐第一个选项。

背景图像不透明度问题

2 个答案: