css - 使用 CSS 修复视差问题

Question

我正在尝试编辑此处显示的纯 css 视差代码:codepen.io/keithclark/pen/JycFw

我想做的是编辑代码，使视差部分的高度是当前高度的一半。当我将代码更改为 50vh 时，背景图像被截断或重复并且无法正确显示。

我尝试将幻灯片类的高度更改为 50vh 并将 #slide1:before 类更改为 background-attachment: fixed;这使得第一张幻灯片看起来不错，但第三张幻灯片看起来还是一样。

Answer 1

vh 和 vw 用于在视口(viewport)中保持正确调整大小的能力。使用 vw/vh，我们可以根据视口(viewport)的大小调整元素的大小。视口(viewport)是窗口中的 View 。视口(viewport)通常用于通过防止屏幕在移动设备上移动来使网页感觉更像应用程序。

解决方案:问题在于，当填充应接收所有四个显式定义的值时，您将填充的所有四个选项都选择为 25vh。

.slide {
  position: relative;
  padding: 12vh 25vh 12vh 25vh;
  min-height: 10px;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
  transform-style: inherit;
}

(也用于页边距)另一种更易读的写法是:

  padding-left: 25vh;
  padding-right: 25vh;
  padding-top: 12vh;
  padding-bottom: 12vh;

更新解决方案:我的下一个猜测是，这可能是使用 vh 和 vw 的浏览器兼容性问题，因为我不太熟悉使用它们，当我尝试我的浏览器(Chrome 42)时它工作正常。当涉及到 Web 开发时，有数以百万计的人在剥皮。您是否尝试过使用不同形式的测量？ Here is link with a complete list of them.