CSS - 背景圖像在移動瀏覽器上無法正常顯示

我正在使用的網站（http://tinyurl.com/ax68brt）的背景圖像在手機瀏覽器中無法正常顯示。 outheader，outbeurzen和outtwitter divs發生問題。標題背景不以100％寬度顯示，並且outbeurzen/outtwitter div的背景也未正確顯示。CSS - 背景圖像在移動瀏覽器上無法正常顯示

這裏怎麼回事？

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%; 
    }

來源

2013-03-03 Lerrie

你不應該在移動瀏覽器使用background-attachment: fixed;，它是越野車和重繪的代價太大。參見f.e.

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?或

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

你還缺少在您的網站<meta name="viewport" … >（視口元）代碼，請參閱https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

來源

2013-03-03 23:17:32

通過使用視口和媒體查詢來修復它：background-attachment：scroll; – Lerrie 2013-03-05 18:06:56

給在HTML頭部分meta標籤。

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

來源

2015-06-01 09:54:50

CSS - 背景圖像在移動瀏覽器上無法正常顯示

回答

相關問題