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

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

背景被绘制在（剪裁到）前景文本中;目前仅支持-webkit-前缀背景剪辑属性。

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

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

旧答案

rgba functional notation使用1和0之间的数字来设置alpha频道（rgb Alpha ），其中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/

圈透明文本

2 个答案:

旧答案