CSS - 背景图像不会在移动浏览器中正常显示 [英] CSS - Background images not displaying properly on mobile browsers

问题描述

我工作的一个网站的背景图片（ http://tinyurl.com/ax68brt ）未在手机浏览器中正确显示。与outheader，outbeurzen和outtwitter的div出现问题。标题背景中不100％的宽度显示，和用于outbeurzen / outtwitter的div背景不正确或显示

这是怎么回事错在这里？

HTML：

 ＆LT; D​​IV ID =outheader＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =outintro＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =outbeurzen＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =outfoto＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =outtwitter＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =outfooter＆GT;＆LT; / DIV＆GT;
 

定制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.

<一个href=\"http://stackoverflow.com/questions/9350869/android-mobile-webkit-css-background-attachmentfixed-not-working\">Android/Mobile WebKit的CSS背景附件：固定不工作或

https://twitter.com/paul_irish/status/306818591196602368

你还缺少一个＆LT; META NAME =视口...＆gt;在您的网站（视口元）的标签，看的 https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

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 - 背景图像不会在移动浏览器中正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！