HTML和CSS只能创建一个自动忽略图像上透明区域的叠加层吗？

Can HTML and CSS only create an overlay which ignores transparent area on an image automatically?

例如，它有一个具有透明背景的图像：

Enter image description here

我想在上面添加一个灰色覆盖(例如，一个DIV，或者画布…)。

Enter image description here

但我希望覆盖会自动忽略图像上的透明区域：

Enter image description here

纯HTML和CSS(例如，按DIV、Canvas…)可以这样做吗？

相关讨论

有点老土的方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.alpha-mask {
mask-image: url(https://i.stack.imgur.com/FwTzE.png);
-webkit-mask-image: url(https://i.stack.imgur.com/FwTzE.png);
mask-mode: alpha;
-webkit-mask-mode: alpha;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}

.overlay {
background-color: #000;
position: absolute;
top: 120px;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}

1
2
3
4

看它工作。

在不了解这个问题的完整用例的情况下，我会说答案是"是的，但是跨浏览器兼容性将是一个麻烦"。

这里发布的另外两个答案显示了如果兼容性不是一个问题的话，它可能是如何实现的，但是我认为这是一个可以做得更简单的事情，通过一些创造性的photoshop，然后分层的元素。

我会怎么做：

PS图象处理软件：把你的基础图像(我假设它是PNG，因为它有一个alpha通道)加载到photoshop中。选择要屏蔽的区域。编辑>复制合并。创建新层，然后编辑>粘贴。将新图层的颜色更改为您希望遮罩覆盖的颜色，并添加阿尔法通道效果。确保关闭默认背景，然后将新层保存为PNG。

HTML：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.container {
height: 300px;
width: 300px;
position: relative;
}

.original-image {
height: 300px;
width: 300px;
background : url(../images/myimage.png) no-repeat top center;
}

.mask {
height: 300px;
width: 300px;
position: absolute;
left: 0;
top: 0;
z-index: 1; //or more depending on what else is going on in the layout
background : url(../images/mask.png) no-repeat top center;
}

在本例中，容器的尺寸必须与图像和遮罩的尺寸相同，以便绝对定位将遮罩正确对齐到图像上。将图像制作成背景可以让你用类似于内容的类型来填充分区。这样做的主要优势，而不是这里其他地方建议的CSS，是这应该适用于几乎所有的浏览器。