css - div 的(无限)背景图像上的灰度过滤器

Question

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

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

#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>

我正在寻找一个纯 CSS 的答案。

原创https://jsfiddle.net/va0qxhth/

编辑: 精度:无论子级大小如何，我都需要背景来填充父级的可见部分。

在我的真实情况下， children 被放在一个 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>

因此您可以按照 Amit 的建议将 ul 用作内部容器。

使用 Amit 建议修改的 fiddle https://jsfiddle.net/va0qxhth/3/

这可行，但我需要在外部容器(以防子容器不够长)和内部容器(填充父容器的可滚动部分)上添加 :before 我希望有一个更优雅的解决方案。

Answer 1

您也可以试试 background-blend-mode :

#scrollable {
  width: 200px;
  height: 200px;
  overflow:auto;
  color: red;
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)), url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) local;
  background-blend-mode: color;
}

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

---

edit 刚刚注意到您的更新。根据您的新代码，它可能是(来自之前链接的 demo):

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
}
ul:before {
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: -1;
  background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
  filter: grayscale(80%)
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: rgba(255, 0, 200, 0.5);
}
#scrollable {
  display: inline-block;
  position: absolute;
  width: 200px;
  height: 100px;
  /*top: 300px;
  left: 300px;*/
  overflow: scroll;
  z-index: 0;
  color: red;
}

<div id="scrollable">
  <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>
    <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>
    <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>
    <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>
    <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>
    <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>
</div>