1. 首页
  2. css

CSS中固定背景的用例

把它归档到一个个人的\”CSS Ah Ha Moments\”类别中。
对我来说,background-attachment属性从来没有那么有用。我一直把它看作是GeoCities时代的一种旧式设计手法,在滚动过程中获得一个重复的背景以保持在原来的位置。将单行background-attachment: fixed;添加到一个元素实际上可以给我们一些力量,让我们在内容之间进行平滑、优美的转换,从而增加用户体验,而无需任何其他依赖项,如Javascript或紧张的动画。制作演示文稿的人造幻灯片?将一个页面分成\”幻灯片\”是非常简单的:
.slide {background-image: url(\”path-to-url\”);background-attachment: fixed;height: 100vh;width: 100%;}
当我们在HTML中调用.slide元素三次时,页面向下滚动时,幻灯片会彼此重叠。
没有库。没有卷轴。纯CSS,完全支持浏览器(嗯,没有触摸屏)。与CSS滚动捕捉点配对可能是一件有趣的事情。
。我们也可以这样做。人造透明度
还记得教室有高架投影仪时,老师必须制作他们称之为透明片的东西来呈现分层信息吗?我们也可以!其他很棒的例子
在CodePen上还有很多其他的很好的例子。这里有一些可以大饱口福的东西。在文章的开头(但也在中间)滑动面板有角度和透明的重叠部分固定面板中的标题
这一个实际上并不使用背景附件,但它非常酷,并具有相关的效果。

CSS中固定背景的用例 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%b8%ad%e5%9b%ba%e5%ae%9a%e8%83%8c%e6%99%af%e7%9a%84%e7%94%a8%e4%be%8b/