代码之家 › 专栏 › 技术社区 › J. Doe

移动Chrome浏览器上特定部分的固定背景图像不起作用

google-chrome-app css html

0

J. Doe · 技术社区 · 7 年前

我知道,这已经被反复讨论过了。但在我看来,这仍然是一个具体的理解问题。在从这里和其他地方实现了几个错误修复之后,我的站点仍然没有按预期工作。我在页面的标题部分有一个固定的背景图像。这在普通的Chrome浏览器上工作得很好。但是我不能让它在移动Chrome浏览器上运行

我有以下几行HTML:

<body id="page-top">
<!-- Header -->
<header class="masthead bg-head text-white text-center">
    <div class="container">
        <h1 class="text-uppercase mb-0">My Name</h1>
        <img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
    </div>
</header>

与以下CSS行对齐:

body {
    font-family: 'Lato';
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}

header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 6rem;
    height:500px;
}

例如,我用浏览器特定的命令等编写了一个高度为100%的媒体查询:

@media (max-width: 576px){
    header{
        height:100%;
        background: url(bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

然后我试着把y-overflow:scroll;移到body,隐藏到header enter link description here

此外,我还试着把图像放到这样的分区中 enter link description here HTML:

<!-- Header -->
<header class="masthead bg-head text-white text-center">
    <div class="container header">
        <h1 class="text-uppercase mb-0">My Name</h1>
        <img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
    </div>
</header>

CSS:

.header{
    position: fixed;
    z-index: -1;
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 6rem;
    height:500px;
}

用这种方法,照片终究会消失的。

我一定是错过了什么,不是吗?

1 回复 | 直到 7 年前

1

0

Anduel 7 年前

你只需要修正背景图像的路径

@media (max-width: 576px){
   header{
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    height:auto;
    max-height: 100%;
}
}

希望这能有所帮助!