Question

我有一个网站，我通过CSS设置身体标签的背景图像和颜色。我使用内联样式display: none;隐藏它，以便优化有时间运行并执行任何自定义而不会导致闪烁。这种情况一直持续到最近，当闪烁回来时，我们没有改变任何看似相关的东西。我正在调试它，并在Chrome（版本45.0.2454.101（64位））中看到，即使正文为display: none;，仍会显示背景图像和颜色。在firefox，safari和IE11中，不显示背景。

以下是一些说明问题的代码：

<html>
   <head>
      <style>.background { background-color: red; }</style>
   </head>
   <body class="background" style="display: none;"></body>
</html>

我用谷歌搜索但无法弄清楚原因。有任何想法吗？

要清楚问题是关于为什么在body标签上发生这种情况。我愿意采用其他方法来隐藏背景图像，但不会将它们视为答案。

Answer 1

根据W3 CSS2 spec，

但是，对于HTML文档，我们建议作者指定 BODY元素的背景而不是HTML元素。用户代理商应遵守以下优先规则来填写 background：如果HTML的'background'属性的值元素不同于'透明'然后使用它，否则使用 BODY元素的'background'属性的值。如果是结果值为“透明”，渲染未定义。

根据这一点，如果您在background-color上设置了background-image或body，但未在background-color上设置transparent html，然后html将使用body的背景。因此，当您隐藏body时，html仍然会使用它的背景。

<强>样本

var hideButton = $('#hide-body');
var toggleBGButton = $('#toggle-html-bg');

hideButton.on('click', function() {$('body').hide()} );
toggleBGButton.on('click', function() {$('html').toggleClass('bg')} );

html {
  background-color: transparent;
}

html.bg {
  background-color: orange;
}

body {
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-color: blue;
}

body.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide-body">Hide body</button>
<button id="toggle-html-bg">Toggle &lt;html&gt; background-color</button>

display：chrome中的body标签上的none不会隐藏背景

1 个答案: