Skip to content

p161:第 34 滚动提示,关于 background-attachment 代码问题 #85

Description

@zphhhhh

测试环境: macOS 11.13.3, Chrome 64

p161,关于滚动提示的 css 代码,理想效果如下:
image

下面是我的实现完整代码,和书中一致:

<div class="app34">
    <p>app34 滚动提示</p>
    <div>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
    </div>
    <style>
        .app34 .list {
            width: 200px;
            height: 100px;
            overflow: auto;
            border: 1px solid silver;
            background: linear-gradient(red, red), /* 方便看效果,white 改为 red */
                        radial-gradient(at top, rgba(0, 0, 0, .8), transparent 70%);
            background-repeat: no-repeat;
            background-size: 100% 15px;
            background-attachment: local, scroll;
        }
    </style>
</div>

上面的代码,两层背景一起滚动,background-attachment: local, scroll; 未生效,好像 attachment 只接受一个单一值,不能用逗号分隔多个参数?
谢谢。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions