Css 背景图像在移动设备上无法正确显示

Posted 2023-03-06

技术标签:

【中文标题】Css 背景图像在移动设备上无法正确显示【英文标题】：Css Background Image Not Displaying Correctly On A Mobile Device 【发布时间】：2016-02-18 19:21:42 【问题描述】：

.header 
     background: #15181f url(images/bg-header.jpg) repeat; 
     color: #fff;

.footer 
     background: #15181f url(images/bg-footer.jpg) repeat;
     color: #fff;

大家好，

我的页眉和页脚背景图像无法在 android 或 iPhone 等移动设备上正确显示，iPad 也是如此，页眉和页脚的背景图像无法正确显示，导致背景图像被裁剪。

我尝试了 javascript 和 css，以及一种又一种技术，但没有任何效果。在我的WordPress website www.awebdesign.co.uk 上，这些风格中的任何一种都不是，我不知道我的移动网站有什么用。我试过overflow-x: hidden;，但不想做任何事情。

在下面尝试了这些样式

.header 
     width:100%;
     float:left;
     height:100%;
     display:block;
     position:relative;
     margin: 0 auto !important;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     z-index:10;

我也为页脚添加了以下内容，但后来删除了它，因为它没有任何好处：

footer.footer 
     width:100%;
     float:left;
     height:100%;
     display:block;
     position:relative;
     margin: 0 auto !important;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     z-index:10;

比我实现的媒体查询，

@media only screen and (max-device-width : 480px)
@media only screen and (max-width: 768px)
@media only screen and (max-width: 1024px

后来改成这个了，

@media screen and (max-width: 480px) 
@media screen and (min-width: 768px) and (max-width: 979px) 
@media screen and (min-width: 981px) and (max-width: 1024px)

但是，它仅在左侧显示背景图像的起始位置。它不能在水平线上正确显示，而是垂直显示而不是水平显示。请帮助我找到解决此问题的方法，从而了解如何将 CSS 背景图像属性应用于移动设备和平板电脑（纵向或横向）。

我认为我的问题很清楚，但如果您有任何问题，请随时提出，我希望其他人也觉得这有帮助。提前致谢！

我删除了上面的 CSS 代码以清除我的自定义样式、文档结构、html5 页面和类现在看起来像这样：

<!doctype html>
<html>
<body>
    <header class="header">
        <div class="container">
            <div class="panel_1"></div>
        </div>
    </header>

    <section class="middle">
        <div class="container">
            <div class="full_width"></div>
        </div>

        <div class="clear"></div>           
    </section><!-- .middle -->
    <footer class="footer">
        <div class="container">
          <div class="footer-nav"> 
          </div>      
        </div>        
    </footer>
  </body>
</html>

.container 
    width: 940px;
    margin: 0 auto; 

.container:after 
    content: "";
    display: table;
    clear: both;

.panel_1 background:url(images/panel_0.jpg) left top no-repeat;
          width: 940px;
          height: 270px; /*border: 1px solid #09F;*/

section.middle background: #CCC; clear: both; 

.header 
    background: #15181f url(images/bg-header.jpg) repeat;
    color: #fff;

footer.footer  
    background: #15181f url(images/bg-footer.jpg) repeat;
    color: #fff;

footer.footer padding: 36px 0; clear: both;
.footer-nav float: left;

【问题讨论】：

【参考方案1】：

我认为您将 cover 的值与 contain 混淆了。

包含将使您的图像捕捉到视口的宽度，并且在它们遇到它们所在元素的底部之前不会放大它们。

希望这会有所帮助。 =)

【讨论】：