2

我正在学习background-attachmentCSS 属性，但由于某些原因，它不会显示在 textarea、图像等上。

这是我的 HTML：

<div class="scrollbox">
    <ul>
        <li>Ah! Scroll below!</li>
        <li>
            <textarea rows="6" cols="50"></textarea>
        </li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <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>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>

这是我的CSS：

.scrollbox {
    overflow: auto;
    width: 500px;
    max-height: 500px;
    margin: 50px auto;

    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

        /* Shadows */
        radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}
4

1 回答 1

0

阴影不会出现在 div 内的任何内容之上，因为它是背景图像。它看起来只是在文本上方，因为它们是相同的颜色，如果您更改文本颜色，您会看到文本也在其上方。

如果您将 div.scrollbox 可视化为文字框，而将 textarea 可视化为第一个内部的较小框。较小的盒子会挡住您对大盒子底部绘制的任何东西的视线。

于 2014-10-06T14:15:48.960 回答