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

Question

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

我有一个网站,我通过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>

Run Code Online (Sandbox Code Playgroud)

我用Google搜索但无法弄清楚原因.有任何想法吗？

要明确的问题是为什么这会发生在身体标签上.我愿意采用其他方法来隐藏背景图像,但不会将它们视为答案.

Answer 1

Jac*_*rez 7

根据W3 CSS2规范,

但是,对于HTML文档,我们建议作者指定BODY元素的背景而不是HTML元素.用户代理应遵守以下优先规则来填写背景:如果HTML元素的'background'属性值与'transparent'不同,则使用它,否则使用'background'属性的值为BODY元件.如果结果值为"透明",则渲染未定义.

据此,如果设置了background-color或background-image上了body,但没有设置background-color其他比transparent对html,那么html将使用body的背景.因此,当你隐藏它时body,html它仍将使用它的背景.

DEMO

var hideButton = $('#hide-body');
var toggleBGButton = $('#toggle-html-bg');

hideButton.on('click', function() {$('body').hide()} );
toggleBGButton.on('click', function() {$('html').toggleClass('bg')} );

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	3830 次
最近记录：	8 年，10 月前