在android和苹果设备中修复背景

所以这是我的问题。我使用以下代码将背景图像设置为页面：在android和苹果设备中修复背景

.page-content{ 
    background-image: url("../../../../assets/pages/media/bg/3.jpg"); 
    background-repeat: no-repeat; 
    background-position: right top; 
    background-attachment: fixed; 
    background-size:cover; 

}

似乎正常工作。然后我说多一点的移动版本

@media(max-width:991px){.page-content{ 
    background-attachment: scroll; 
    } 
}

我已经尝试设置background-size作为封面，最初甚至试图用百分比播放。问题在于，在移动设备上，背景不会保留在屏幕上。当我向下滚动时，它会与其余内容一起提升。

任何帮助将不胜感激。

来源

2017-10-06 Usman Pasha Siddiqui

所以你想附件在移动设备或滚动修复？ –

请让我们知道你想要它是固定的还是正常的。固定的CSS属性在Ipad和移动设备上无法正常工作。 –

我希望它始终保持在屏幕上。 –

我相信大多数，如果不是所有手机都不支持固定背景图像。你必须做的是把图像放在一个固定位置的单独的div中。以下代码由@vincent提供 - background: fixed no repeat not working on mobile 它适用于身体元素，但我相信您可以调整它以适应您的需要。

body:before { 
    content: ""; 
    display: block; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: -10; 
    background: url(photos/2452.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

来源

2017-12-29 10:30:38 Ted

在android和苹果设备中修复背景

回答

相关问题