时间戳

首页 > 解决方案 > 粘性背景图像/w CSS

css - 粘性背景图像/w CSS

问题描述

我目前正在创建我的第一个网站，并且即将完成。我在标题下的主体使用背景图像。我发现我的每个页面都有一个问题，因为它们的高度都不同，因此我对背景图像的当前设置会放大图片以适合整个页面。我想要做的是设置背景图像“粘性”。我的想法是背景图像将直接位于标题下方，当向下滚动时，图像最终会到达屏幕顶部，然后保持固定。我认为这样我可以将图片设置为仅适合屏幕尺寸而不是整个页面。

有什么建议么？

标签： css

解决方案

您可以在 CSS 中为背景设置不同的属性。

background-clip     Specifies the painting area of the background
background-image    Specifies one or more background images for an element
background-origin   Specifies where the background image(s) is/are positioned
background-size     Specifies the size of the background image(s)

以下代码将使您的背景固定：

background: url('picture.jpg') no-repeat fixed;

要制作“粘性”效果，请查看 CSS 位置文档。

一个元素

position: sticky;

根据用户的滚动位置定位。

Internet Explorer、Edge 15 及更早版本不支持粘性定位。Safari 需要 -webkit- 前缀。您还必须至少指定顶部、右侧、底部或左侧之一，才能使粘性定位起作用。

推荐阅读