Question

我为此测试创建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中正常工作，但在谷歌浏览器中不能正常工作（图像不像第一个代码那样固定位置）。感谢您的帮助。

变换：translate（0,0）;没有在谷歌浏览器中使用IONIC？

0 个答案: