移动设备上的图像背景(固定，居中)问题 [英] Image background (fixed, center) issues on mobile devices
本文介绍了移动设备上的图像背景(固定，居中)问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站上有图片背景:
I have an image background on my website:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
(...)
}
在PC上没有任何问题，但是具有垂直屏幕的移动设备呈现背景的方式并不完全相同:移动浏览器似乎水平地适应了背景，因此垂直方向仅覆盖了很小的网站.我试图通过对background-size属性使用不同的值来解决此问题，但这没有用.
There are not any problems on PC, but mobile devices with vertical screen renders background not exactly in the same way: it seems that mobile browsers fit the background horizontally, so vertically it covers only small piece of website. I've tried to fix it by using different values for background-size attribute, but it didn't work.
我的CSS + HTML:
My CSS + HTML:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
margin-left: 0;
margin-right: 0;
}
#overall {
margin-left: 0;
margin-right: 0;
width: 100%;
height: 100%;
}
#logo {
position:absolute;
left:0;
top:0;
}
#content {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 300px;
background-color:rgba(255,255,255,0.5);
text-align: center;
}
和
<body>
<div id="overall">
<div id="logo"><img src="logo.png" width="654" height="150"></div>
<div id="content"><a href="#"><img src="cont.png" border="0"></a></div>
</div>
</body>
推荐答案
这是我想出的解决方案.它在横向和纵向屏幕上均可完美运行.
This is the solution that I came up with. It works perfect on both landscape and portrait screens.
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
这篇关于移动设备上的图像背景(固定，居中)问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
