html - 背景图像不会切换到移动设备上的替代图像

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

我认为您会发现它与您所追求的很接近，但在某些视口(viewport)中它没有延伸得足够低。第二点的解决方案是准备另一个更高的背景图像。

更新

It seems like there has to be a better way to cover all the potential screen sizes than having a different background image for all of them. How do you get a responsive background image for mobile?

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

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

• 有时，除了背景图片之外，您还可以为我们提供背景颜色。

• 如果您可以忍受不显示某些背景图片，那么使用 background-position可以帮助很多。例如，如果兴趣中心位于图像的中间，那么像下面这样的 CSS 将使背景图像在元素的中间居中

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

祝你好运!