Question

我正在尝试建立一个视差网站，但是在调整图像大小时遇到了问题。
我的目标是将图片放在背景中（显然）并在其上滚动。

要在前景中放置第二层，我需要指定“间隙”的高度，直到第二层开始在图像上滚动。如果我理解正确，那就是我的代码中min-height: X;（等等）的值.bg-img1。

当然，我可以简单地输入多个像素，例如600，并且始终保持600px的距离。但是我想归档的是，高度是根据bg图像的比例缩放的。否则，在较小的设备上，我会得到一个很小的图像，上面有很多空白。

我的一些代码：

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat;


  }
  .bgimg-1 {
    background-image: url("images/viive_10.jpg");
    min-height: 600px;
    width: 100%;
  }

  .bgimg-2 {
    background-image: url("images/viive_26.jpg");
    min-height: 600px;
    width: 100%;
  }

  .bgimg-3 {
    background-image: url("images/viive_24.jpg");
    min-height: 600px;
    width: 100%;
  }

Answer 1

您可以测试宽度 background-size：cover; 或 background-size：content; 。在这里，您有所不同。

Spring Integration Gemfire

如何根据图像尺寸调整bg图像尺寸？

1 个答案: