css - 通过下面的背景颜色为具有透明度的灰度(但 RGB)图像着色

Question

我已经尝试了一些基础知识:具有背景颜色的父 div，然后是具有透明度的图像(假设是一个圆圈)在堆栈顺序中更高。这将为图像着色，但一旦有 child 出现，它似乎就不起作用了。将起作用的是:

 .tinted-image {
 width: 300px;
  height: 200px;
  background:url("images/testNote.png") rgba(0, 171, 255, 0.5);
  background-clip: padding-box;
}

.red:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;

}但是，该背景颜色是正方形； div 的形状/大小。我试图让颜色不出现在实际图像以外的任何地方。

想象一个透明背景的圆圈；我只想给圆圈上色。这里的想法是能够只使用一个图像(圆圈)并仅通过 css 重新着色。

Answer 1

SVG 怎么样？您可以使用 CSS 设置其内容的样式。

HTML(从 an SVG from Wikipedia 复制粘贴的路径):

<svg>
    <path d="m 40,0 0,74.531249 c -2.19436,-3.1329 -11.11823,-3.60474 -17.375,-0.15625 -7.41543,4.0871 -10.79756,11.75107 -7.5625,17.125 3.23507,5.37393 11.86582,6.43085 19.28125,2.34375 4.45154,-2.45352 7.41871,-6.2048 8.40625,-9.96875 0.45244,-2.06878 0.18854,-3.14209 0.15625,-4.59375 l 0,-52.656249 c 32.53399,8.241492 17.51919,36.811079 14.59268,46.902749 26.72779,-36.505741 -14.22819,-51.395935 -14.59268,-73.527749 z" />
</svg>

CSS:

svg {
    fill: red;
}

虽然在实践中，您可能希望将 SVG 放在单独的文件中并使用更实用的 CSS 选择器，但我认为这很有效。

但是，根据您的问题判断，我不太确定您在问什么或您想要做什么。这是我能想到的最接近的事情，所以我可能是错的。