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

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

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

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

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

你可以用SVG来做

这基本上是可以将CSS应用于半个字符吗？但有一个图像。

尝试覆盖混合模式。或者乘法！(不支持IE或EDGE，谢谢@stilltorik)

.multiplied {

background-color: blue;

width:250px;

height: 100px;

margin-top: -100px;

mix-blend-mode: overlay;

}

但是要小心，它不受ie或edge:canius.com/feat=css mixtblendmode支持

非常接近，但不幸的是，所有可用的混合模式都不能精确地复制所需的结果。它还高度依赖于图像和图像出现的背景。这其中是否重要取决于询问者，尽管很明显，从上面的平淡"+1"评论来看，18个其他用户要么没有注意到，要么不关心。

感谢您注意到Edge&ie不支持它。我正在编辑。@是的。这正是我提供两者的原因。我不知道任何其他方法来实现这种渲染，所以我通常会弄乱混合模式和颜色本身，以获得适当的结果和正确的最终颜色。不是最理想的方式，而是最简单，没有太多副作用。

有点老土的方式：

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

}

看它工作。

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

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

我会怎么做：

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

HTML：

CSS：

.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，是这应该适用于几乎所有的浏览器。