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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle Demo

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

您可以在颜色上添加FILTER。这可能比使用插入框阴影更优雅。

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

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

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

3 个答案: