Javascript 背景图像不透明度问题
我现在正在做一个主页，遇到了一些问题 我将背景图像设置为覆盖在身体中：Javascript 背景图像不透明度问题,javascript,html,css,Javascript,Html,Css,我现在正在做一个主页，遇到了一些问题 我将背景图像设置为覆盖在身体中： 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; backgro
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;
}
$("body").css("opacity", "0");
不透明度：0可见性：隐藏背景图像没有影响。它肯定会对具有背景图像的元素产生影响，背景图像是body标记的子元素。所以你有两个选择：
在
内容周围添加一个包装器
：
您目前拥有：
<body>
<!-- Content -->
</body>
将此更改为：
<body>
<div id="wrapper">
<!-- Content -->
</div>
</body>
并将body上的CSS
移动到#wrapper
以及任何Javascript/jQuery目标body
设置HTML
元素的不透明度
无论您在哪里设置不透明度：0
，请改为在
元素上进行设置
就个人而言，我推荐第一个选项。无论出于何种原因（我似乎找不到任何原因），在
标签上设置不透明度：0
或可见性：隐藏
对背景图像没有影响。它肯定会对具有背景图像的元素产生影响，背景图像是body标记的子元素。所以你有两个选择：
在
内容周围添加一个包装器
：
您目前拥有：
<body>
<!-- Content -->
</body>
将此更改为：
<body>
<div id="wrapper">
<!-- Content -->
</div>
</body>
并将body上的CSS
移动到#wrapper
以及任何Javascript/jQuery目标body
设置HTML
元素的不透明度
无论您在哪里设置不透明度：0
，请改为在
元素上进行设置
就我个人而言，我推荐第一种选择。我已经用你的代码复制了这个问题。代码可以简化为：
body{
opacity: 0.1;
background-color: red;
}
根本的问题是，除非您有以下内容，否则摆弄
元素的不透明性不会产生任何效果。一个简单的修复方法是添加以下内容：
html{
background-color: white;
}
我已经用你的代码复制了这个问题。代码可以简化为：
body{
opacity: 0.1;
background-color: red;
}
根本的问题是，除非您有以下内容，否则摆弄
元素的不透明性不会产生任何效果。一个简单的修复方法是添加以下内容：
html{
background-color: white;
}
供应商在背景尺寸属性上的前缀？不需要。另外，向我们展示您当前的javascript，其中除了背景图像之外，所有内容都会消失。@BetaSystems-您只需要50个代表就可以在其他人的帖子上留下评论。如果你是一个活跃的用户，这很容易获得，但有效地减少了不知道/不关心网站内容和误用评论的一次性用户的噪音。我可能错了，但不透明适用于该元素及其所有子元素。请参见背景尺寸属性上的供应商前缀？不需要。另外，向我们展示您当前的javascript，其中除了背景图像之外，所有内容都会消失。@BetaSystems-您只需要50个代表就可以在其他人的帖子上留下评论。如果你是一个活跃的用户，这很容易获得，但有效地减少了不知道/不关心网站内容和误用评论的一次性用户的噪音。我可能错了，但不透明适用于该元素及其所有子元素。请看+1奇怪的是，有了html的背景，它就可以工作了！确实有效。谢谢（很抱歉，没有足够的声望来投票。551;+1奇怪的是，html的背景让它工作起来了！确实有效。谢谢（对不起，没有足够的声望来投票。）