在背景颜色上添加半透明灰色图层 [英] Add semi transparent gray layer on top of background color

问题描述

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

我想在顶部添加一个半透明灰色图层的一些TD

因此，...

具有黄色背景的TD将变成深黄色。

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

和里面的文字TD仍然是一样的（黑色）

这是可能的吗？

解决方案

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

  .selectedTD {
 box-shadow：inset 0 0 0 500px rgba（0,0,0,0.5）; 
} 
  

div {background：yellow; padding：20px;白颜色; box-shadow：inset 0 0 0 100px rgba（0，0，0，0.5）;}

 < div>由于内嵌的box-shadow< / div>  

JSFiddle Demo

I have a Table containing many TDs. Each TD can has different background color (i.e.: yellow, red, green. etc) But unknown in advance.

I want to add a semi-transparent gray layer on top of some of the TD

So that ...

The TD with yellow background will become dark yellow.

The TD with red background will become dark red ...

and the text inside TD remains the same (black)

Is this possible?

解决方案

This is quite easy to do, just use an inset 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

这篇关于在背景颜色上添加半透明灰色图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！