Question

我在移动设备上使用视差背景图片时遇到了一些麻烦。当它在移动设备上显示时，图像会直接缩放，所以我无法看到它是什么，如果我在横向或纵向中使用它并不重要。平板电脑也会出现同样的问题。

我用background-size: 100% auto;尝试了现在你可以看到它，但它只是简单的丑陋。还尝试了background-size: contain;，但也没有完成这项工作，也搞砸了桌面视图。此外，视差功能在移动设备上也不起作用，但对我来说无关紧要。

平板电脑也会出现同样的问题。

Here's what you see on mobile, when I use background-size: cover;

Here's what you see on mobile, when I use background-size: 100% auto;

.intro {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #111;
  min-height: 600px;
  padding: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  background-attachment: fixed;
}

<section id="intro" style="background-image: url('img/background.jpg'); no-repeat;" class="intro">

我很感谢任何帮助

P.S。我是新来的，所以我希望我能以正确的方式问：）

Answer 1

background-size:cover将是您的正确方法。

放大它的原因是因为background-size: cover试图填充完整视口（您使用height:100%和width:100%定义）。您的图片并未针对手机进行优化。我敢打赌，如果你把手机放在横向模式下它会很好看。这是因为您的图像宽度高于高度。

我建议您使用第二张图片然后在移动设备上使用。您可以使用绘图或paint.net等基本图像编辑工具剪切出可在手机上使用的图像。

CSS：背景图片放大移动和放大平板电脑，Bootstrap

1 个答案: