Question

所以我今天遇到了这个。

我的部分比视口长，后者的背景图片为background-attachment: fixed;。此背景也使用background-size: cover;属性。（需要响应）

将固定位置应用于背景后，它会裁剪图像以使其适合当前视口高度并溢出标记顶部。

有没有办法让图像坐在正确的位置（即相同的位置，好像它没有固定）并保持盖子的正确性。

＆＃13;

.hero {
  background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
  background-size: cover;
  background-position: 50% 50%;
  /* set the height of the hero. */
  height: 125vh;
}

.fixed {
  background-attachment: fixed;
}

＆＃13;

<h4>With the fixed position</h4>
<section class="hero fixed"></section>

<h4>Without the fixed position</h4>
<section class="hero"></section>

＆＃13;

我猜测固定元素是固定在视口上的，答案是否定的，但不确定它是一个背景图像。我想知道是否有人找到了解决方法？

Answer 1

问题是，如果您使用固定的背景区域固定为100％视图端口 - 您可以通过添加背景大小来放大背景区域：

.hero {
  background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
  /*background-size: cover;*/
  background-position: 50% 50%;
  /* set the height of the hero. */
  background-size: 125vh;
  height: 125vh;
}

位置固定且尺寸包含相对于容器的背景

1 个答案: