背景图像未切换到移动设备上的备用图像

Posted 2023-02-26

技术标签:

【中文标题】背景图像未切换到移动设备上的备用图像【英文标题】：Background images not switching to alternate images on mobile device 【发布时间】：2017-04-07 22:54:54 【问题描述】：

我一直在开发我的投资组合网站（在www.imkev.in 上查看），但我在使用移动版本时遇到了一些问题。我的 CSS 中有媒体查询，应该在 530 像素以下的任何屏幕宽度下切换到较低的文件大小和不同的裁剪图像。页面的其他元素（我的多列布局切换到单列布局）应该类似地切换到较低屏幕宽度的不同页面布局，它们确实如此，所以我知道我的基本媒体查询正在工作。但是，背景图像元素没有。它们停留在较大的文件上，不会缩小图像以适应浏览器窗口。同样，我只在实际的移动设备上遇到这个问题。

当我将桌面上的浏览器窗口大小减小到 530 像素以下时，它会切换到备用图像，并且我可以在网上找到的移动设备模拟器（Chrome 开发者工具和其他基于浏览器的工具）似乎都像他们应该做的那样工作。

这是我正在使用的 CSS：

.portfolio-background 
   background: url(/assets/images/background1-small.jpg) fixed;
   background-size: cover;

   @media (min-width: 530px) 
   .portfolio-background 
        background: url(/assets/images/background1.jpg) fixed;
        background-size: 100% 100%;

我还尝试在较小的媒体查询中将背景大小调整为“覆盖”，结果相同。我的 html 文件顶部也有这个，它应该将浏览器窗口的宽度设置为正在使用的设备的宽度：

<meta name="viewport" content="width=device-width, initial-scale=1">

有什么建议吗？

编辑：我正在使用编译器，我最初在我的编译器完成之前给出了代码，这很神奇。我已经调整了帖子以显示实际的代码输出。还在努力解决问题

【问题讨论】：

【参考方案1】：

背景图片在您的网站上正确交换，我认为问题在于您没有看到您想要的结果，因为您的移动背景的大小和格式，以及您的 CSS 规则。

您网站上的代码与您发布的代码略有不同，因此我将使用它作为示例。

首先，为您的移动背景尝试这样的操作：

body 
   background: url(/assets/images/background1-small.jpg) fixed;
   background-size: 100% auto;  
   background-repeat: no-repeat;

我想你会发现它与你所追求的很接近，但它在某些视口处延伸得不够低。第二点的解决方案是准备另一个更高的背景图像。

更新

似乎必须有更好的方法来涵盖所有潜力屏幕尺寸而不是为所有这些屏幕提供不同的背景图像。您如何获得移动设备的响应式背景图像？

移动设备上的背景可能会很棘手，因为元素的格式可能会与桌面上的格式发生根本性的变化。

尝试准备您的移动背景图片，使其比例与您要在移动设备上覆盖的元素的比例相似

有时除了背景图像之外，您还可以使用背景颜色。

如果您可以忍受一些不显示的背景图像，那么使用background-position 会有很大帮助。例如，如果感兴趣的中心在您的图像中间，那么像下面这样的 css 将使您的背景图像在您的元素的中间居中

element     
    background: url(/assets/images/background1-small.jpg) fixed;    
    background-size: initial;      
    background-repeat: no-repeat; 
    background-position: 50% 50%;

祝你好运！

【讨论】：

那种工作。为什么不：背景尺寸：封面；在手机上工作？似乎必须有一种更好的方法来覆盖所有潜在的屏幕尺寸，而不是为所有这些尺寸设置不同的背景图像。如何获得移动设备的响应式背景图片？ @KevinShewey，background-size:cover 不适合您，因为它会缩放图像以覆盖元素的高度和宽度。在移动设备上，元素很高，因此缩放的背景图像也很宽，这就是问题的根源。尝试使您的移动背景图像的比例类似于典型移动屏幕的比例，例如 2 宽 x 3 到 4 高，并使用我建议的相同 CSS。更正@KevinShewey，尝试使您的移动背景比例更接近您试图覆盖的元素（在移动设备上）的比例。有时，除了这种方法之外，使用背景颜色也会有所帮助。背景颜色将填充您的缩放背景图像遗漏的元素区域【参考方案2】：

考虑以下链接：https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

您使用了错误的媒体查询。而是将最小值更改为最大值。这意味着最大宽度是指定的宽度。所以每一个宽度小于或等于 530px 的决定都会使用你指定的样式。

【讨论】：

【参考方案3】：

这必须是：

.portfolio-background 
  background: url(/assets/images/background1-small.jpg) fixed;
  background-size: cover;


  @media (min-width: 530px) 
    .portfolio-background 
      background: url(/assets/images/background1.jpg) fixed;
      background-size: 100% 100%;

即首先是常规规则，然后是媒体查询，在其中与包含与常规规则不同的参数的规则相同的选择器。

【讨论】：

抱歉，我正在使用编译器，我在代码通过编译器之前给出了代码。我的错！在我的实际 CSS 中，输出确实按照您在此处的建议进行读取。我已经编辑了我的帖子以澄清。谢谢！【参考方案4】：

background-size: cover;

应该是：

background-size: 100% 100%;

【讨论】：

这似乎不仅不能解决问题，而且似乎会导致我的背景图像无法覆盖整个区域，而我的某些其他屏幕尺寸。