2

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

我将背景图像设置为覆盖在正文中：

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

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

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

只需单击“查询”而不是单击任何框，然后按 ENTER 即可调用 js 函数。

谢谢！！

4

2 回答 2

4

我已经修改了重现问题的代码。代码可以简化为：

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

<body>根本问题是，除非您有以下内容，否则摆弄元素的不透明度不会产生任何影响。一个简单的修复是添加这个：

html{
    background-color: white;
}

更新的小提琴

于 2013-10-16T16:05:20.653 回答
0

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

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

您目前拥有的位置：

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

将其更改为：

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

CSS并将on 正文移动到#wrapper任何 Javascript/jQuery 目标正文

设置HTML元素的不透明度

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

就个人而言，我会推荐第一个选项。

于 2013-10-16T16:01:59.000 回答