Question

我刚完成我的网站，只是在CSS中测试内容，当我注意到当我刷新页面大约1秒钟时，屏幕上出现一个奇怪的矩形。我不知道那是什么...

那是什么样子：

body, html    {
    height: 100%;
}
*   {
    box-sizing: border-box;
}
.bg-img {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1dheaD1dxyVt36DttKPFYNm9GHuGVfMYDjSOicpB2gVIk_Vq1_w");
    height: 100%;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.1);
}
.date-box {
    background-color: rgba(0,0,0, 0.25);
    color: white;
    font-weight: bold;
    border: 3px solid whitesmoke;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 20px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time tho</title>
    <link rel="stylesheet" type="text/css" href="css/indexstyles.css">
    <script type="text/javascript" src="jscript/datefw.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
    <div class="bg-img"></div>
    <div class="date-box">
        <h1 id="phms"></h1>
        <p id="pdate"></p>
    </div>
    <a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/222015592738062336"><p id="stax">by stax</p></a>
    <script>
        drawOverlay();
    </script>
</body>
</html>

那就是当我重新加载页面时（只是一瞬间）：

Answer 1

我自己解决了！我刚刚使用了函数window.onload 所以我在页面完全加载后渲染了盒子。就这么简单：D

.date-box-hide {
    display: none;
}
.date-box-show {
    display: block;
    background-color: rgba(0,0,0, .4);
    color: white;
    font-weight: bold;
    border: 3px solid whitesmoke;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 20px;
    text-align: center;
}

<body scroll="no" style="overflow: hidden">
    <div class="bg-img"></div>
    <div id="hide" class="date-box-hide">
        <h1 id="phms"></h1>
        <p id="pdate"></p>
        <script>
            window.onload=function()
            {
                document.getElementById("hide").className="date-box-show";
            };
            drawOverlay();
        </script>
    </div>
    <a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/222015592738062336"><p id="stax">by stax</p></a>
</body>

Answer 2

似乎只是.date-box元素，没有任何内容。您可以尝试在min-width CSS规则中添加一个min-height和.date-box值，以使该框的大小在日期/时间完全加载之前想要，例如：

.date-box {
    background-color: rgba(0,0,0, 0.25);
    color: white;
    font-weight: bold;
    border: 3px solid whitesmoke;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 20px;
    text-align: center;
    min-width: 300px;
    min-height: 200px;
}

这是一个非常酷的开始，您在那里。继续努力！

Answer 3

我猜这个框是div .date-box。也许您通过JavasScript函数#pdate放置了#phms和drawOverlay()的内容。从那以后，直到函数运行，这些div都是空的。

要解决此问题，请隐藏.date-box默认值，并在内容填充后显示，例如下面所示。

CSS

.date-box {
    display: none;
}

和JS

drawOverlay()
document.querySelector('.date-box').styles.display = "block"

当我刷新页面时，CSS正在渲染一个奇怪的矩形

3 个答案: