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

Making some kind of see-through glass image in css/html/js

本文关键字：透明 玻璃 图像 html css js      更新时间：2023-09-26

浏览本网站:http://myankle.co.uk/faq/

当你向下或向上滚动时，脚踝的图像会发生变化。我知道你可以让div不透明，然后在后面放一张图片，但是这个效果是怎么做到的呢?图片似乎随着页面移动

这可以通过设置背景为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;
}

为body添加一个position: fixed;然后让它上面的HTML内容透明，这样就可以看到背景图像。它没有随着页面移动，这是一种错觉。

该元素使用background-attachment CSS属性来固定图像相对于屏幕:

如果指定了背景图像，则background-attachment CSS属性决定该图像的位置是在视口内固定还是与其包含块一起滚动。

elem {
    background-attachment: fixed;
}
<<p> JSFiddle演示/strong>。
相关文章：