css background 实现滚动时添加头部阴影

2024-07-18

#css

一、效果演示

二、代码实现

<style>
    .wrapper {
        height: 200vh;
        background-image: linear-gradient(#fff, transparent),
                          linear-gradient(#666, transparent);
        background-size: 100% 300px, 100% 30px;
        background-repeat: no-repeat;
        background-attachment: scroll, fixed;

        & > div {
            height: 50vh;
        }
    }
</style>

<div class="wrapper">
    <div>1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</div>

三、实现思路

上左图。background-image: linear-gradient(red, transparent); 可以使用渐变色作为背景图片。示例中是红色往透明色渐变。

上中图。background-size: 100% 50px; 可以设置背景图片的大小，第一个值 100% 表示宽度，第二个值 50px 表示高度。设置了背景图片大小后默认会重复排列。

上右图。background-repeat: no-repeat; 设置背景图片不要重复排列。

上左图。设置背景图片为红色往透明色渐变。

上中图。设置背景图片为蓝色往透明色渐变。

上右图。backgorund-image 可以设置多个背景图片，每个背景图片的值用逗号隔开，第一个背景图片层级比第二个背景图片层级高。所以0px的地方红色是会覆盖蓝色的，越往50px渐变，因为往透明色渐变，所以可以看到一点点蓝色。

background-attachment: scroll。拖动浏览器滚动条，背景图片的位置会随着滚动条拖动而改变，这是默认情况。

background-attachment: fixed。拖动浏览器滚动条，背景图片位置固定，不随着滚动条拖动而改变。

上左图。修改第一个背景图片高度为 200px，第二个背景图片高度为 20px，页面上只能看到红色往透明色渐变的背景图片，因为第一个背景图片完全覆盖了第二个背景图片。

上右图。修改第一个背景图片为白色往透明色渐变，第二个背景图片为灰色往透明色渐变，页面上看到的是第一个背景图片白色，第二个背景图片灰色被遮盖住了。

background-attachment: scroll, fixed; 给第一个背景图片 (白色往透明色渐变) 设置 scroll，白色背景图片会随着滚动条往下拖动而消失；给第二个背景图片 (灰色往透明色渐变) 设置 fixed，灰色背景图片不会随着滚动条拖动而改变位置，会一直在页面顶部。

置顶情况下，白色背景图片会覆盖灰色背景图片，页面上看不到头部阴影；浏览器滚动条往下拖动时，白色背景图片随着内容会往上划出可视窗口，而灰色背景图片会一直保持在顶部的位置，所以就形成了滚动时自动添加头部阴影的效果。

前面介绍 background-attachment 时，是拖动浏览器滚动条：

scroll: 背景图片会随着滚动条拖动而改变位置。
fixed: 背景图片不会随着滚动条拖动而改变位置。

拖动 html 元素自身滚动条时，background-attachment 表现会有所不同：

scroll: 背景图片不会随着滚动条拖动而改变位置。
local: 背景图片会随着滚动条拖动而改变位置。

↶ 返回首页

本文总阅读量次