背景图片右下角对齐错误 - chrome on android

Question

我有一个网站需要 'bottom right' 背景图像对齐，以及背景颜色 #000。

我的 css 在我目前试过的所有 OS 和浏览器（chrome，即 moz，safari）上测试正常，除了 chrome 在 android，在浏览器外渲染背景图片window。其他图像对齐工作正常 - 问题似乎是 only 右下对齐，only with chrome on android.

问题页面 url：Features a background-image: bottom right alignment

CSS如下：

body { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1em;
    background: url("../images/bg_prices_XL.jpg");
    background-size: contain;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: bottom right; 
    background-attachment: fixed;
}

如果我将对齐方式更改为背景图像：右上角；然后问题就解决了。

页面在 android moz 上正确呈现。因此，我是否需要包含特定于 -webkit 的对齐方式？

已尝试添加：

html,body {
   height 100%;
   width 100%;
}

...但运气不好。视口大小已经设置为设备大小，Chrome 似乎无论如何都在视口之外渲染，在页脚下方。

尝试在 css 的 html 部分下设置背景图像的样式，但没有成功。

欢迎所有想法。

Answer 1

我已经通过 chrome devtools 检查了该页面。我想如果你删除 background-attachment: fixed; 属性它会起作用。

Answer 2

...别介意伙计们。我将背景设为固定的 100% 高度和宽度 div，z-index 为负值。对我来说，这感觉像是一个笨拙的解决方法，但它似乎有效。如果有更好的建议，我们将不胜感激。

背景图片右下角对齐错误 - chrome on android

Background image bottom-right alignment error - chrome on android

css

android

google-chrome

background-image