css background:attachment实现滚动出现分隔阴影

最新推荐文章于 2024-03-11 12:54:07 发布

神奇大叔

最新推荐文章于 2024-03-11 12:54:07 发布

阅读量374

点赞数

分类专栏：我有奇妙动画文章标签： css

本文链接：https://blog.csdn.net/weixin_43294560/article/details/121499987

版权

我有奇妙动画专栏收录该内容

43 篇文章 4 订阅

订阅专栏

background-attachment: srcoll;	背景不随滚动变化
background-attachment: local;	背景随容器滚动变化

通过背景渐变色:实现不滚动时的背景色和滚动时的阴影渐变色

滚动出现阴影:
	未滚动时,不滚动的渐变色覆盖在阴影渐变色上,设置成background-attachment:local;使得滚动时背景色往上移,展现阴影
	阴影渐变色设置成background-attachment: srcoll;

原理图:

在这里插入图片描述
代码示例:

// 情形一：
.g-one {
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}

// 情形二：
.g-two {
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

// 情形三：
.g-combine {
    background: 
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

在这里插入图片描述

代码示例:

.g-table {
    margin: 50px auto;
    width: 450px;
}

table {
    position: relative;
    width: 450px;
    border: 1px solid #ccc;
    text-align: center;
    
    tbody {
        border-collapse: separate;
        height: 200px;
    }
    
    td, th {
        width: 150px;
        padding: 5px;
        border: 1px solid #ccc;
    }
}

.g-scroll {
    top: -1px;
    position: relative;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: 
        linear-gradient(#fff, transparent) top / 100% 100px,
        radial-gradient(at 50% -15px, rgba(0, 0, 0, .8), transparent 70%) top / 100000% 12px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}


<div class="g-table">
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>姓名</th>
                <th>地址</th>
            </tr>    
        </thead>
    </table>
    <div class="g-scroll">
        <table>
            <tbody>
                <tr>
                    <td>2021-01-01</td>
                    <td>XXXXX</td>
                    <td>DDDDD</td>
                </tr>    
            </tbody>
        </table>
    </div>
</div>