简体   繁体   English

使所有浏览器都支持我的背景图片吗?

[英]Make my background image supported by all browsers?

I have a background image for my website that I have set to be responsive to the size of the browser and stay centered; 我的网站背景图片已设置为能够响应浏览器的大小并保持居中状态; it works completely when I adjust the size in Chrome. 当我在Chrome中调整尺寸时,它可以完全正常工作。 However, the background image does not appear in IE or on my android phone in the Chrome app, or on Safari; 但是,背景图片不会出现在IE或Chrome应用中的android手机或Safari上; basically it only works on Chrome. 基本上,它仅适用于Chrome。 What should I do to make the background image appear on all devices and browsers while still remaining centered? 如何使背景图片出现在所有设备和浏览器上,同时仍然居中?

CSS: 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: 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>

I just try with the your example same as external URL it nicely work for me. 我只是尝试将您的示例与外部URL相同,这对我来说很好。 actually we can used both external and internal image URL for that. 实际上,我们可以同时使用外部和内部图像URL。 This issue may be issue with the loading time of the image. 此问题可能与图像的加载时间有关。

And also try to used css vendor prefix as 并尝试使用css供应商前缀作为

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

If this also not work there is several css and js methods to complete your task. 如果这也行不通,则有几种CSS和js方法可以完成您的任务。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM