Question

我尝试过一些基础知识：父级div带有背景颜色，然后是具有透明度的图像（想想一个圆圈可以说）在堆叠顺序中更高。这将使图像着色，但是一旦孩子出现，它似乎不起作用。将起作用的是：

 .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选择器，但我认为这很有效。

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

通过下方的背景颜色使透明度着色灰度（但RGB）图像

1 个答案: