在背景颜色之上添加半透明灰色层

Question

我有一个包含许多 TD 的表。每个 TD 可以有不同的背景颜色（即：黄色、红色、绿色等）但事先未知。

我想在一些 TD 之上添加一个半透明的灰色层

这样……

黄色背景的TD会变成深黄色。

红色背景的TD会变成深红色 ...

TD里面的文字保持不变（黑色）

这可能吗？

Answer 1

这很容易做到，只需使用插入box-shadow：

.selectedTD{
    box-shadow:inset 0 0 0 500px rgba(0,0,0,0.5);
}

div {
  background: yellow;
  padding: 20px;
  color: white;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5);
}

<div>This has a darker background because of an inset box-shadow</div>

JSFiddle Demo

Answer 2

我建议使用linear gradient 作为背景颜色的一种过滤器：

.filtered {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 100%);
}

<div style="background-color: red">
  lorem ipsum
</div>
<div style="background-color: orange">
  lorem ipsum
</div>
<div style="background-color: yellow">
  lorem ipsum
</div>
<div style="background-color: green">
  lorem ipsum
</div>
<div style="background-color: blue">
  lorem ipsum
</div>
<div style="background-color: purple">
  lorem ipsum
</div>
<br>
<div class="filtered" style="background-color: red">
  lorem ipsum
</div>
<div class="filtered" style="background-color: orange">
  lorem ipsum
</div>
<div class="filtered" style="background-color: yellow">
  lorem ipsum
</div>
<div class="filtered" style="background-color: green">
  lorem ipsum
</div>
<div class="filtered" style="background-color: blue">
  lorem ipsum
</div>
<div class="filtered" style="background-color: purple">
  lorem ipsum
</div>

或者，在 CSS 中使用 filter 规则，尽管它会影响前景和背景。

Answer 3

您可以在颜色上放置一个过滤器。这可能比使用插入框阴影更优雅。

您可以在此处阅读有关过滤器的优秀教程：https://css-tricks.com/almanac/properties/f/filter/

在您的情况下，您将使用 brightness 过滤器来更改每种颜色。当然，如果您愿意，您可以使用 JavaScript 函数动态地执行此操作。