基本 HTML 文档中的 CSS 颜色更改答案

【问题标题】：CSS color change in basic HTML document基本 HTML 文档中的 CSS 颜色更改
【发布时间】：2015-12-31 17:22:30
【问题描述】：

考虑以下代码：

<html>

<head>
  <style>
    body {
      background-color: #CCC;
    }

    .con {
      background-color: #FFF;
      width: 80%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="con">
    [SITE CONTENT]
  </div>
</body>

</html>

我想要实现的是将内容背景设置为白色，占用屏幕宽度的80% 并将位于中心。

正文背景（10% 右侧和 10% 左侧）将为灰色。（中心的80% 将被白色背景的内容div 占据）。

它工作正常。但是大多数时候在页面加载的时候，（主要是网速慢的时候），一开始内容也会出现灰色背景，然后就变成白色了。

避免这种过渡效果的最佳方法是什么？

我现在正在考虑以下选项：

一个。最后使用js改变body的颜色

b.最初在css中，body的背景颜色也是白色然后在文档末尾，覆盖 css 并将其设为灰色。

但我确信有更好的解决方案。请帮忙。

【问题讨论】：

请更正：.con{background-color:#FFF;宽度：80%；边距：0 自动；}
已更正，抱歉打错了。我的实际代码只是这样。

标签： css html css

【解决方案1】：

你可以在不使用 jQuery 的情况下尝试这样的事情：

在display: none; 中设置您的html。然后当您的页面加载时更改为 display: block; 以显示 html 内容。

setTimeout(function() {
  var html = document.querySelector("html");
  html.setAttribute("style", "display: block");
}, 1000);

html {
  display: none;
}
body {
  background-color: #CCC;
}
.con {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
}

<body>
  <div class="con">[SITE CONTENT]</div>
</body>

另一种方法是使用 jQuery 库：

$(function() // When the DOM is ready.
{
    $("html").css({
      "display": "block"
    });
});

html {
  display: none;
}
body {
  background-color: #CCC;
}
.con {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <div class="con">[SITE CONTENT]</div>
</body>

希望对你有帮助。

【讨论】：

【解决方案2】：

这个呢？感谢A.M.K

body {
  -moz-animation: fadein 4s;
  /* Firefox */
  -webkit-animation: fadein 4s;
  /* Safari and Chrome */
  -o-animation: fadein 4s;
  /* Opera */
  background-color: #ccc;
}

@keyframes fadein {
  from {
    background-color: #fff;
  }
  to {
    background-color: #ccc;
    ;
  }
}

@-moz-keyframes fadein {
  /* Firefox */
  from {
    background-color: #fff;
  }
  to {
    background-color: #ccc;
    ;
  }
}

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    background-color: #fff;
  }
  to {
    background-color: #ccc;
    ;
  }
}

@-o-keyframes fadein {
  /* Opera */
  from {
    background-color: #fff;
  }
  to {
    background-color: #ccc;
    ;
  }
}

.con {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
}

【讨论】：