Question

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

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

我尝试将幻灯片类的高度更改为50vh，将＃slide1：class更改为background-attachment：fixed;这使得第一张幻灯片看起来不错，但第三张幻灯片仍然看起来一样。

Answer 1

vh和vw用于在视口中正确调整大小的能力。使用vw / vh，我们可以将元素的大小设置为相对于视口的大小。视口是窗口中的视图。视口通常用于防止屏幕在移动设备周围移动，从而使网页更像应用程序。

解决方案：问题在于，当它应该接收所有四个明确定义的值时，您选择填充的所有四个选项为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）时它工作正常。在网络开发方面，有数百万只皮肤上有数百万只猫。您尝试过使用其他形式的测量吗？ Here is link with a complete list of them.

修复CSS的视差问题

1 个答案: