Question

查看此网站时：http://myankle.co.uk/faq/

无论何时向下或向上滚动，脚踝的图像都会发生变化。我知道你可以使div不透明并在其后面放置一个图像，但是这个效果是如何完成的？图像似乎与页面一起移动。

Answer 1

这是通过将背景设置为background-attachment: fixed来实现的。效果是视差的基本实现。

让你入门的好文章是http://davidwalsh.name/parallax

应用此类的示例类将是：

.parallax {
  background-image: url('http://demoimage.com/image.jpg');
  background-color: none !important;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; // For mobile this should be scroll to fix bugs with ios
  overflow-y: hidden;
}

Answer 2

将背景图像添加到位置：固定的主体;然后使其上面的html内容透明，这样你就可以看到背景图像了。它没有移动页面，这是一种幻觉。

Answer 3

该元素使用background-attachment CSS property来修复相对于屏幕的图像：

如果指定了背景图像，background-attachment CSS属性将确定图像的位置是否在视口中固定，或者与其包含的块一起滚动。

elem {
    background-attachment: fixed;
}

JSFiddle demo

在css / html / js中制作某种透明玻璃图像

3 个答案: