0

我为这样的测试创建 HTML 文件

<html><head>
<style>
.wrapper{
    transform: translate(0,0);
}
.container{
    height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
.container1{
    background-image: url(http://www.fillmurray.com/900/600);
}
.container2{
    background-color: white;
}
</style></head>
<body>
<div class="wrapper">
        <div class="container container1">
        </div>
        <div class="container container2">
        </div>
    </div>
</body>
</html>

我在 Google Chrome 和 Firefox 上测试了这段代码。它在两个浏览器上都能正常工作。（对于图像的固定位置）但是我将上面的代码应用于离子这样的......

<style>
.wrapper{
    transform: translate(0,0);
}
.container{
    height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
.container1{
    background-image: url(http://www.fillmurray.com/900/600);
}
.container2{
    background-color: white;
}
</style>

<ion-view view-title="Home">
    <ion-content overflow-scroll="true">
        <div class="wrapper">
            <div class="container container1">
            </div>
            <div class="container container2">
            </div>
        </div>
    </ion-content>
</ion-view>

第二个代码在 Firefox 中正常工作，但在 Google Chrome 中不能正常工作（图像不像第一个代码那样固定位置）。感谢您的帮助。

4

0 回答 0