Question

我在滚动项目上有三个背景，除Chrome中的背景附件外，所有多个值都正常工作，所有这些值都使用滚动。它位于Shopify SCSS文件中，但我已将相同的代码放入CodePen，但错误仍然存在。

阴影封面是一个白色/透明/白色渐变，遮住阴影并应与容器一起滚动，当在一个方向或另一个方向上有可滚动内容时，阴影应该是可见的。

它基于Lea Verou的这篇旧版（2012）帖子：http://lea.verou.me/2012/04/background-attachment-local/

.external-list__values {
    padding-left: 5%;
    margin-left: 0;
    float: left;
    height: 200px;
    overflow-y: auto;
    background-image:
        /* Shadow cover */
        linear-gradient(rgba(255,255,255,1) 5%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%,rgba(255,255,255,1) 95%),
        /* Shadow */
        radial-gradient(grey,rgba(grey,0) 70%),
        radial-gradient(grey,rgba(grey,0) 70%);
    background-attachment:
        /* Shadow cover */
        local,
        /* Shadow */
        scroll,
        scroll;
    position: relative;
    background-repeat: no-repeat;
    background-color: white;
    background-position:
        /* Shadow cover */
        0 0,
        /* Shadow */
        left 0 bottom -0.5rem,
        left -0.5rem;
    background-size:
        /* Shadow cover */
        100% 100%,
        /* Shadow */
        100% 1rem,
        100% 1rem;
    li {
        display: block;
        border: 1px dashed darken(grey,20%);
        border-radius: 4px;
        padding: 0.5rem 1rem;
        margin-bottom: 0.4rem;
    }
}

https://codepen.io/l-fischer/pen/RgBbVb

多个背景附件值无法在Chrome中使用

0 个答案: