Question

我的网页有不同的部分，当我要将背景图像添加到我的部分时，它会显示在实际部分的上方。在网站上，我的版块看起来正常，但是当我检查我的版块时，谷歌说我的版块高于我的实际版块。有人可以解释一下为什么会这样吗，还是给我一个解决这个问题的方法。（很难解释）如果您需要一张照片，我可以给您发送，只需给您发送电子邮件即可。

我在Google Chrome浏览器中检查.section-over图片的绿色是我的部分的填充，但正常背景图像仅显示在填充中。但是当我检查我的导航我只看到导航的大小朝上标记我的导航位于屏幕上方。

这是一个jsfiddle示例：https://jsfiddle.net/1y764zjs/1/

这是我的基本设置，问题可能出在我的编码这一部分，但我不确定，也许这是我的浏览器存在的问题，但我对此表示怀疑。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #000000;
    font-family: 'Quicksand', sans-serif;
    font-weight: 300px;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.clearfix {zoom: 1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

section {
    padding-top: 80px;
}

.row-1 {
    max-width: 1140px;
}

/* ------------------------------------------------------- */
/* -- Header -- */
/* ------------------------------------------------------- */

这是我标题的CSS。If i inspect my header google show me the size of my header with numbers with an arrow that points upwards---above the section. That's why i suspect that all my sections are above where they are supposed to be.

.logo {
    height: 50px;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    float: left;
}



.navi {
    float: right;
    font-size: 125%;
    list-style: none;
    margin-top: 0px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.98);
}

.navi li {
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 25px;
    margin-bottom: -30px;
    float: right;
}

.navi li a {
    color: #000000;
    text-decoration: none;
}

.navi li a:link,
.navi li a:visited {
    padding: 23px 0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0s;
}

.navi li a:hover,
.navi li a:active {
    border-bottom: 3px solid #000000;
}

.waar {
    margin-right: 150px;
}


/* ------------------------------------------------------- */
/* -- Over -- */
/* ------------------------------------------------------- */

这是我想放置背景的部分代码。

.over {
    background-image: url(img/zorg.jpg);
    background-image: linear-gradient(rgba(181, 181, 181, 0.72), rgba(0, 0, 0, 0.8)), url(img/zorg.jpg);
    background-size: cover;
background-attachment: fixed;
}

当我在google chrome上检查我的网页时，我的部分显示的更高？

0 个答案: