Wordpress：徽标部分问题无法正常工作

Question

目前我的页面如下所示：

但是当我向下滚动时，星星的背景图像与徽标部分重叠，如下所示：

这是网站标题css的样子：

.site-header {
    position: relative;
    z-index: 1000;
    /*background-attachment: fixed; */
}

.site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    height: 130px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

.site-header .site-title:hover {
    text-decoration: underline;
}

.site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 20px;
}

.site-description {
    font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
    margin: 0;
}

这就是当前设置星形图像的方式：

body.page-id-72 #stars {
    background: #425169 url("../images/photos/stars.gif") top center;
    width: 100%;
    height: 8000px;
    position: fixed;
    top: 300px;
    z-index: 100;
}

我希望网站标题背景保持白色，因为它显示在第一张图片中。在这方面的任何帮助都会很棒

Answer 1

只需将此添加到您的CSS。您目前没有.site-header的任何背景，因此当您向下滚动时，它会将div的背景与地球相对应。

.site-header {
    background: white;
    z-index: 101; //you likely need to add this too, b.c you gave a z-index of 100 to the stars
}

如果您不想在每个页面上更改.site-header，只有具有星星背景的那个，您可以尝试

.page-id-72 .site-header {
    background: white;
    z-index: 101; //you likely need to add this too, b.c you gave a z-index of 100 to the stars
}

Answer 2

尝试在css文件的末尾写一下： -

.site-header {
    background-color:#FFF;
}

如果仍然无效，请尝试： -

.site-header {
    background-color:#FFF !important; // !important is usually not recommended.
}