IOS

Question

我网站上的标题图片（dorinart.com）完全定位于所有浏览器，包括Android移动浏览器，但是当我在IOS（iphone，ipad）上打开它时，它只显示图像的右上角（你可以检查如果你打开dorinart.com）。我怎么能解决这个问题？

我的css看起来像这样：

.header{
    background: url('../img/banner5.jpg');
    background-repeat: no-repeat;
    position: fixed;
    background-size: cover;
    min-height: 730px;
    position: relative;
}

Answer 1

你能试试这个CSS吗？我想你想把图像置于可用的空间中心吗？如果有效，请告诉我：

.header{
   background-image: url('../img/banner5.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position-x: center;
   min-height: 760px;
   position: relative;
}

如果您不希望它居中，那么只需删除background-position-x属性。

希望这会有所帮助。感谢。

更新：来自模拟器的附加截图：

Answer 2

我最近遇到过类似的问题，并意识到background-size:cover与background-attachment:fixed有关。

在您的网站中，它是这样的：

background: url('../img/banner5.jpg') no-repeat fixed;
background-size: cover;
min-height: 760px;
position: relative;

此处background-attachment:fixed是问题所在。

我通过使用iPhone的媒体查询并设置背景附件属性来滚动来解决这个问题。

所以你能做的就是用这个：

.header{
    background-size: cover;
    background-attachment: fixed;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}