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

Question

我一直在开发我的投资组合网站（在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">

有什么建议吗？

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

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

祝你好运！

Answer 2

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

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

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

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

Answer 4

background-size: cover;

应该是：

background-size: 100% 100%;