问题描述
我工作的一个网站的背景图片()未在手机浏览器中正确显示。与outheader,outbeurzen和outtwitter的div出现问题。标题背景中不100%的宽度显示,和用于outbeurzen / outtwitter的div背景不正确或显示
这是怎么回事错在这里?
HTML:
< DIV ID =outheader>< / DIV>
< DIV ID =outintro>< / DIV>
< DIV ID =outbeurzen>< / DIV>
< DIV ID =outfoto>< / DIV>
< DIV ID =outtwitter>< / DIV>
< DIV ID =outfooter>< / DIV>
定制CSS:
#outheader {
背景图像:网址(图像/ achtergrond / header.jpg);
浮动:左;
高度:660px;
宽度:100%;
背景附件:固定;
背景重复:不重复;
背景位置:50%0像素;
保证金:0像素;
填充:0像素;} #outintro {
背景图像:网址(图像/ achtergrond / body.jpg);
浮动:左;
身高:汽车;
宽度:100%;
背景附件:固定;
背景重复:重复-Y;
背景位置:50%;
填充顶:60像素;
填充底:60像素;
} #outbeurzen {
背景图像:网址(图像/ achtergrond / beurzen.jpg);
浮动:左;
高度:315px;
宽度:100%;
背景附件:固定;
背景重复:不重复;
背景位置:50%-300px;
} #outfoto {
背景图像:网址(图像/ achtergrond / body.jpg);
浮动:左;
身高:汽车;
宽度:100%;
背景附件:固定;
背景重复:重复-Y;
背景位置:50%;
保证金底:70像素;
的margin-top:70像素;
} #outtwitter {
背景图像:网址(图像/ achtergrond / twitter.jpg);
浮动:左;
高度:315px;
宽度:100%;
背景附件:固定;
背景重复:不重复;
背景位置:50%;
FONT-FAMILY:'简明的Roboto,无衬线;
} #outfooter {
背景图像:网址(图像/ achtergrond / body.jpg);
浮动:左;
高度:240像素;
宽度:100%;
背景附件:固定;
背景重复:重复-Y;
背景位置:50%;
}
您不应使用背景附件:固定;
移动浏览器,它是越野车和重绘太昂贵。
见F.E.
Android/Mobile WebKit的CSS背景附件:固定不工作或
你还缺少一个< META NAME =视口...>在您的网站
(视口元)的标签,看的
The background images of a website I'm working on (http://tinyurl.com/ax68brt) are not displaying properly on mobile phone browsers. The problem occurs with the outheader, outbeurzen and outtwitter divs. The header background is not displayed in 100% width, and the backgrounds for the outbeurzen/outtwitter divs are not properly displayed either.
What is going wrong here?
Html:
<div id="outheader"></div>
<div id="outintro"></div>
<div id="outbeurzen"></div>
<div id="outfoto"></div>
<div id="outtwitter"></div>
<div id="outfooter"></div>
Css:
#outheader {
background-image: url(images/achtergrond/header.jpg);
float: left;
height: 660px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0px;
margin: 0px;
padding: 0px;}
#outintro {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
padding-top: 60px;
padding-bottom: 60px;
}
#outbeurzen {
background-image: url(images/achtergrond/beurzen.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% -300px;
}
#outfoto {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
margin-bottom: 70px;
margin-top: 70px;
}
#outtwitter {
background-image: url(images/achtergrond/twitter.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50%;
font-family: 'Roboto Condensed', sans-serif;
}
#outfooter {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: 240px;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
}
You shouldn't use background-attachment: fixed;
on mobile browsers, it's buggy and the repaint is too costly.See f.e.
Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working? or
https://twitter.com/paul_irish/status/306818591196602368
You're also missing a <meta name="viewport" … >
(Viewport meta) tag on your site, see https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
这篇关于CSS - 背景图像不会在移动浏览器中正常显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!