Circle transparent text

Question

Hey guys I am trying to make this number in the circle transparent, I tried with

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

but the number is black i tried with opicity, but it works for the whole div. This is the code: 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; 
}

Jacob G · Answer 1 · 2016-07-03T00:08:53.100

1

After your comment on this answer, it appears you are trying to make the background under the text show through. Unfortunately, the CSS property that allows this, background-clip:text, isn't well supported yet, and doesn't work in IE or Firefox:

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

For now, the simplest method is to just use an image.

However, if you would rather not use a static image(Like a jpg or png), you might be able to use an SVG.

Older answer

The rgba functional notation uses a number between 1 and 0 to set the alpha channel(rgbAlpha) , with 1 having no transparency.

So, your color:rgba(0,0,0,1) is just black.

Set the color to rgba(0,0,0,0.5), or another decimal between 1 and 0:

Updated JSFiddle

edited Jul 03 '16 at 00:08

answered Jul 02 '16 at 23:55

Jacob G

13,762
3
47
67

Yes I know with transparent I mean I want to see the background. – Jul 03 '16 at 00:00
You want to see the tan color behind it? Why can't you just set the color to tan? https://jsfiddle.net/zqsLjrzd/ – Jacob G Jul 03 '16 at 00:01
Its not for this background for another which is not just color – Jul 03 '16 at 00:04
@ivailo Then you can't really do it, I would recommend using an image – Jacob G Jul 03 '16 at 00:04

score 0 · Accepted Answer · answered Jul 02 '16 at 23:57

0

you just need to change the transparency value which can be from 0 to 1

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

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

answered Jul 02 '16 at 23:57

Ahmed Salama

2,795
1
11
15

Yes I know with transparent I mean I want to see the background. – Jul 03 '16 at 00:00

Circle transparent text

2 Answers2

Older answer