我知道,这已经被反复讨论过了。但在我看来,这仍然是一个具体的理解问题。在从这里和其他地方实现了几个错误修复之后,我的站点仍然没有按预期工作。
我在页面的标题部分有一个固定的背景图像。这在普通的Chrome浏览器上工作得很好。但是我不能让它在移动Chrome浏览器上运行
我有以下几行HTML:
<body id="page-top">
<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 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;
}
用这种方法,照片终究会消失的。
我一定是错过了什么,不是吗?
