Question

我正在构建一个需要整页背景图片的应用。我正在使用 Angular JS 和 CSS3 作为背景图片。

在页面加载时，会点击<body back-img> 自定义指令并运行以下代码：

var grindModule = angular.module('grindApp', ['ngRoute'])
grindModule.directive('backImg', function(){
    return function(scope, element, attrs){
    var url = ['./../static/images/pushup.jpg', './../static/images/work.jpg']
    var idx = Math.floor(Math.random() * url.length)
    element.css({
        'background': 'url(' + url[idx] +') no-repeat center center fixed',
        'background-size' : 'cover'
    });
};

生成随机索引，然后用于从存储它们的数组中获取随机图像 url 。然后将 url 放在下面的代码background: url()中。

页面加载后，页面如下所示：

请注意屏幕截图底部的黑色空白区域。我不想要这个。这个背景适用于所有设备，除了这个特定的电话（我知道）。只有在我使用移动版 Chrome 浏览器时才会生成此错误。使用移动 Firefox 浏览器时不会发生这种情况。似乎是 Chrome 具体，但我可能是非常错误的。

以下是我的所有代码，如果您认为这可以帮助您：Grind Github。

Answer 1

我看了一下你的网站。

这是我的思路：

1）该移动设备上的浏览器可能已过时，并且未正确支持“封面”属性。但问题在于你已经添加了“中心”作为背景位置，因此，最糟糕的是，浏览器应该显示图像在页面中心对齐的中心位置。它不是。

2）图像没有居中的事实让我觉得“身体”元素在某种程度上不能正常运行，高度设置为100％。尝试将高度100％添加到HTML标记中。

html,body {
    height: 100%;
}

3）如果＃2没有修复它，那么我会尝试在页面中添加另一个元素，就像这样的起始<body>标记之后：

<div class="bg-fullpage-wrapper"></div>

此元素的样式应为：

div.bg-fullpage-wrapper {
    /* Your current background stuff here ie:
    background: url("./../static/images/work.jpg") 50% 50% / cover no-repeat fixed;
    */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

为此次尝试从身体标记中移除100％的高度。当你这样做时，你必须修复元素的z-index。

4）如果这个DIV不能正常工作，那么我可能会开始考虑浏览器资源耗尽等等，因为似乎加载的图像对于Web格式来说是巨大的，可能会出现问题从/向该分辨率缩减。

Answer 2

这是一个CSS问题，而不是JS问题。然而，除此之外，我不知道幕后发生了什么。

head {min-height: 100%}

这就是我所知道的。

使用Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging

在Xperia Z2上重播

在索尼Xperia Z1移动设备上切断背景图像

2 个答案: