考虑以下代码:
<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 占据)。
它工作正常。但大多数情况下，当页面加载时(主要是网络速度较慢时)，最初内容也会显示为灰色背景，然后变为白色。
避免这种过渡效果的最佳方法是什么？
我现在正在考虑以下选项:
a. Change color of body at the end using js
b. Initially in css, background color of body also be white and then at the end of document, override css and make it gray.
但我确信有更好的解决方案。请帮忙。
最佳答案
你可以在不使用 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>希望对你有帮助
关于html - 基本 HTML 文档中的 CSS 颜色更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32925126/