"background-size:cover" 不覆盖手机屏幕

Posted 2023-03-06

【中文标题】"background-size:cover" 不覆盖手机屏幕

【英文标题】："background-size: cover" does not cover mobile screen

【发布时间】：2012-11-19 11:59:08

【问题描述】：

我在我的网站上有一个使用background-size:cover 的照片背景。它在大多数情况下都有效，但在我的 Galaxy S3 纵向模式下会留下一个奇怪的约 30 像素的空白区域。

我附上了截图。 1px 青色线是为了说明整个屏幕。似乎背景在社交媒体uls 之后立即停止。

我通过删除ul 和背景将它自己附加到标语文本的底部进行了测试。

另外，这是我与移动端肖像视图相关的 CSS：

@media only screen and (max-width: 480px) 

.logo 
    position: relative;
    background-size:70%;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    margin-top: 30px;
   

h1 
    margin-top: -25px;
    font-size: 21px;
    line-height: 21px;
    margin-bottom: 15px;


h2 
    font-size: 35px;
    line-height: 35px;


.footer_mobile 
    display: block;
    margin-top: 20px;
    margin-bottom: 0px;


li 
    display: block;
    font-size: 1.3em;

这以前不会发生，但我想我在尝试解决另一个问题时不小心弄错了它。

【问题讨论】：

html，背景图片的CSS？

CSS 是 'html background: url(../images/bg.jpg) no-repeat top right fixed; -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面； '

只是几个猜测：你试过html height: 100% ，还是尝试将背景附加到body而不是html？

html height: 100% 解决了这个问题，但是出现了一个新问题——现在横向模式只覆盖了一半。随意看看..vitaliyg.com

【参考方案1】：

经过数小时尝试不同的事情后，将min-height: 100%; 添加到html 的底部 background:... 对我有用。

【讨论】：

最后，一个别人花了几个小时试图解决的问题，我得到了现成的答案，做出改变！非常感谢，很有魅力。

考虑添加高度的100vh：***.com/a/38532368/2418655

【参考方案2】：

这适用于 android 4.1.2 和 ios 6.1.3 (iPhone 4) 以及适用于桌面的交换机。为响应式网站编写。

以防万一，在您的 HTML 头中，类似这样的内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML：

<div class="html-mobile-background"></div>

CSS：

html 
    /* Whatever you want */

.html-mobile-background 
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;


@media (min-width: 600px) 
    html 
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    
    .html-mobile-background 
        display: none;
    

【参考方案3】：

Galaxy S3 在纵向或横向视图中的宽度都大于 480 像素，因此我认为这些 CSS 规则不适用。您将需要使用 720 像素。

尝试添加：

*  background:transparent 

就在最后，然后移动你的html background:... CSS。

通过这种方式，您可以查看是否有移动页脚 div 或您创建的任何其他元素挡住了视线。

我也会尝试将背景 CSS 应用到正文而不是 HTML。希望你能更接近答案。

【讨论】：

屏幕覆盖了一半。上面的用户建议在 html 元素上使用 height: 100% 。这似乎解决了这个问题，但是当设备变成横向时，屏幕只覆盖了一半，其余部分显示为白色。如果可以，请随时现场检查问题。也许这会更容易。

我确实在现场尝试过，但我没有 Galaxy S3。我的建议不成功？

很遗憾没有。这就是我看到的（这是来自我的桌面——奇怪的是，我遇到的原始问题无法在桌面上复制，即使满足相同的宽度/高度）i.imgur.com/uZh9q.png

再次感谢您的编辑建议。我尝试将 max-width: 480px 更改为 720px 并将该代码添加到该媒体查询的底部。背景仍然没有覆盖，将自身附加到链接的底部。不知道我应该寻找什么。

【参考方案4】：

当前的解决方案是使用视口高度 (vh) 来指示所需的高度。 100% 不适用于移动 Chrome。 CSS：

background-size: cover;
min-height: 100%;