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

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