圆形透明文字

Question

大家好，我正在尝试让圆圈中的这个数字透明，我试过

color: #000; 
color: rgba(0, 0, 0, 1);

但是我用 opicity 尝试过这个数字是黑色的，但它适用于整个 div。这是代码：https://jsfiddle.net/ivailo/3q6ej7cc/6/

BODY {
background-color: tan;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em; 
}

Answer 1

在您对此答案发表评论后，您似乎正试图让文本下方的背景显示出来。不幸的是，允许这样做的 CSS 属性 background-clip:text 还没有得到很好的支持，并且在 IE 或 Firefox 中不起作用：

The background is painted within (clipped to) the foreground text; this is currently only supported with a -webkit- prefixed background-clip property.

目前，最简单的方法就是使用图像。

但是，如果您不想使用静态图片（如 jpg 或 png），您可以 use an SVG.

较早的回答

rgba functional notation使用1和0之间的数字来设置alpha通道(rgbAlpha),其中 1 个没有透明度。

所以，你的 color:rgba(0,0,0,1) 只是黑色。

将颜色设置为rgba(0,0,0,0.5)，或1和0之间的另一个小数：

Updated JSFiddle

Answer 2

你只需要改变透明度值，可以从 0 到 1

color: rgba(0, 0, 0, 0.7);

https://jsfiddle.net/3q6ej7cc/7/

圆形透明文字

Circle transparent text

css

text

transparent

较早的回答