一种在背景颜色上设置渐变的 CSS 方法

Question

你能帮我解决以下挑战吗？这个问题有解决办法吗？

他们有一个带孩子的可滚动容器：

<ul class="scroll-shadows">
  <li>Adipisci, totam.</li>
  <li>Error, dicta.</li>
  <li class="disabled-item">Disabled input</li>
  <li>Eveniet, dolorem!</li>
  ...
</ul>

可滚动容器有顶部阴影（背景）：

background:
  linear-gradient(
    gray, white
  ) center top;

子项已禁用（背景颜色）：

.disabled-item {
  background-color: #F6F6F7;
}

有没有办法让阴影优先于背景颜色？

我为这种情况创建了一个CodePen： https://codepen.io/Radek-Skrabal/pen/oNJzMEQ

尝试使用背景混合模式，但没有效果。

尝试使用z-indexes，但没有效果。

Answer 1

您可以尝试向 .disabled-item 元素添加具有“darken”值的混合混合模式；它看起来像这样：

.disabled-item {
  background-color: #F6F6F7;
  mix-blend-mode: darken;
}