html - CSS背景封面

Question

我有一个在 CSS 中完美完成的全屏背景，使用：

body {
  background-image: url('../images/backgrounds/<image>.jpg');
  background-size: cover;
  float:left;
  overflow: hidden
  }

尽管在移动设备、iOs 和 IE Windows Mobile 上查看此内容时，背景是平铺而不是全屏。我知道我可能需要为移动操作系统提供不同的 CSS 文件，但我不确定到底是什么问题，如何全屏显示移动图像？

Answer 1

将您的背景图像更改为：

background: url('../images/backgrounds/<image>.jpg') no-repeat center center fixed; 

如果这不起作用，请查看CSS-Tricks关于完美全页背景图像的文章。

只有 CSS 解决方案和 jQuery 解决方案

Answer 2

您应该使用按 xy 方式重复的封面。因此，在对应的 css 中使用背景图像和颜色确实是一个技巧。

    body {
     background: url("images/bg3.jpg") repeat-x scroll 0 0 #EF9360;
    }

因此，如果您的 css 背景图像在顶部是蓝色的，您应该使用蓝色背景...

在此处阅读更多信息 http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient1

Answer 3

这可能是分辨率问题，获取屏幕尺寸变量并拉伸图像以填充屏幕。

并尝试添加background-repeat:no-repeat;