Question

我的网站背景图片已设置为响应浏览器的大小并保持居中;当我在Chrome中调整大小时，它完全有效。但是，背景图像不会出现在IE浏览器中或Chrome浏览器应用程序中的Android手机上;基本上它只适用于Chrome。如何使背景图像仍显示在所有设备和浏览器上，同时仍保持居中？

CSS：

html {
    background-image: url("http://blog-imgs-65-origin.fc2.com/s/n/n/snnantn/20140317230845d64.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: rgb(198, 198, 198);
    background-position: center;
}

HMTL负责人：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <title>Website</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>

Answer 1

我只是尝试使用与外部URL相同的示例，它很适合我。实际上我们可以使用外部和内部图像URL。此问题可能与图像的加载时间有关。

并尝试使用css供应商前缀

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

如果这也行不通，那么有几种css和js方法可以完成你的任务。

使所有浏览器都支持我的背景图像？

1 个答案: