Css div（无限）背景图像上的灰度过滤器

我想在div的背景图像上添加灰度过滤器。这应该只影响背景，而不影响内容

所以我在a:之前设置了我的图像和过滤器。 这很好，直到我尝试滚动内容。 背景图像仅填充父对象的可见部分

#scrollable
{
  display:inline-block;
  position:absolute;
  width:200px;
  height:100px;
  top:300px;
  left:300px;
  overflow:scroll;
  z-index:0;
  color:red;
}

#scrollable:before
{
  content:"";
  z-index:-1;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);

    filter: grayscale(80%);
}

<div id="scrollable">foo<br />...</div>

#可滚动
{
显示：内联块；
位置：绝对位置；
宽度：200px；
高度：100px；
顶部：300px；
左：300px；
溢出：滚动；
z指数：0；
颜色：红色；
}
#可滚动：之前
{
内容：“；
z指数：-1；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：url（数据：image/gif；base64，R0LGodlheaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
滤镜：灰度（80%）；
}
foo
。。。

我正在寻找一个css唯一的答案

原创的

编辑： 精度：我需要背景来填充父对象的可见部分，而不管子对象的大小

在我的真实案例中，孩子们被放在ul/li容器中

<ul class='inner'>
  <li><div>foo</div></li>
  <li><div>foo</div></li>
  <li><div>foo</div></li>
  <li><div>foo</div></li>
  <li><div>foo</div></li>
  <li><div>foo</div></li>
 </ul>

福
福
福
福
福
福

因此，您可以使用ul作为Amit建议的内部容器

使用Amit建议修改小提琴

这是可行的，但我需要在外部容器（如果子容器不够长）和内部容器（填充父容器的可滚动部分）上添加：before

---

我希望有一个更优雅的解决方案。

您也可以尝试：

#可滚动{
宽度：200px；
高度：200px；
溢出：自动；
颜色：红色；
背景：线性梯度（rgba（255255,0.8），rgba（255255,0.8）），url（数据：image/gif；base64，R0LGodlheaaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
背景混合模式：颜色；
}

foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo

我不知道它是如何工作的，但它是如何工作的。太糟糕了，IE>=11yep不支持它，忘了提到这一点，在这种情况下，我只看到一个额外的包装器用作缓冲区，将过滤器元素作为同级而不是父级，以便不继承其效果。与我之前链接的代码笔一样。。。。