CSS背景位置在Mobile Safari(iPhone/iPad)中不起作用

前端之家收集整理的这篇文章主要介绍了CSS背景位置在Mobile Safari(iPhone/iPad)中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在移动Safari中有一个背景位置的问题。它在其他桌面浏览器上工作正常,但不能在iPhone或iPad上运行。
  1. body {
  2. background-color: #000000;
  3. background-image: url('images/background_top.png');
  4. background-repeat: no-repeat;
  5. background-position: center top;
  6. overflow: auto;
  7. padding: 0px;
  8. margin: 0px;
  9. font-family: "Arial";
  10. }
  11.  
  12. #header {
  13. width: 1030px;
  14. height: 215px;
  15. margin-left: auto;
  16. margin-right: auto;
  17. margin-top: 85px;
  18. background-image: url('images/header.png');
  19. }
  20.  
  21. #main-content {
  22. width: 1000px;
  23. height: auto;
  24. margin-left: auto;
  25. margin-right: auto;
  26. padding-left: 15px;
  27. padding-right: 15px;
  28. padding-top: 15px;
  29. padding-bottom: 15px;
  30. background-image: url('images/content_bg.png');
  31. background-repeat: repeat-y;
  32. }
  33.  
  34. #footer {
  35. width: 100%;
  36. height: 343px;
  37. background-image: url('images/background_bottom.png');
  38. background-position: center;
  39. background-repeat: no-repeat;
  40. }

“background_top.png”和“background_bottom.png”都向左移动太远。我已经google了,据我所知,在移动Safari中支持背景位置IS。我也尝试过各种关键字(“顶”,“中心”等),px和%的组合。有什么想法吗?

谢谢!

更新:这是.html文件中的标记显示设计&布局在其他浏览器中好((我也更新了上面的css)

  1. <html lang="en">
  2. <head>
  3. <title>Title</title>
  4. <link rel="Stylesheet" type="text/css" href="styles.css" />
  5. </head>
  6. <body>
  7. <div id="header"></div>
  8. <div id="main-content"></div>
  9. <div id="footer"></div>
  10. </body>
  11. </html>

两个背景图像都非常宽(〜2000像素),以便在任何尺寸的浏览器上占用空间。

附:我知道可能有一些更有效的CSS快捷方式可以使用,但是现在我喜欢将代码组织起来,就像我有可见性一样。

解决方法

当放置在正文标签中时,iPhone / Webkit浏览器不能将背景图像对齐。唯一的办法是从身体标签删除背景图片,并使用额外的DIV作为包装器。
  1. #wrapper {
  2. background-color: #000000;
  3. background-image: url('images/background_top.png');
  4. background-repeat: no-repeat;
  5. background-position: center top;
  6. overflow: auto;
  7. }
  8.  
  9.  
  10. <html lang="en">
  11. <head>
  12. <title>Title</title>
  13. <link rel="Stylesheet" type="text/css" href="styles.css" />
  14. </head>
  15. <body>
  16. <div id="wrapper">
  17. <div id="header"></div>
  18. <div id="main-content"></div>
  19. <div id="footer"></div>
  20. </div>
  21. </body>
  22. </html>

猜你在找的CSS相关文章