使用边框使文本透明

Question

I'm trying to display text (a number), which is displayed on a background image.

What I currently got is the following:

 body { background-image: url("https://i.picsum.photos/id/10/800/800.jpg"); background-repeat: no-repeat; background-position: center; width: 400px; height: 400px; } #age { /* 1 pixel black shadow to left, top, right and bottom */ text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; font-family: sans; color: transparent; font-size: 40vw; }

 <h1 id="age">27</h1>

Basically, it works more or less as I want. However, the number itself is always filled with white color. What I would like though, is to have that number displayed huge there, have it filled with no color (transparent) and only use it with a border around the number itself. Later on, I want to upgrade to a counter, that visibly counts to the defined number first. However, the first step for me would be to display the number without the white fill.

Do you know any possible way to do this and only display a white border and have the background shine through for the rest?

Answer 1

There is an experimental -webkit-text-stroke CSS property, that does what you need (see this answer ):

 #age-container { background-image: url("https://images.pexels.com/photos/68568/primula-catchfly-blossom-bloom-pink-68568.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); background-repeat: no-repeat; background-position: center; background-size: cover; width: 400px; height: 400px; display: flex; } #age { margin: auto; -webkit-text-stroke: 10px white; font-family: sans-serif; color: transparent; font-size: 250px; }

 <div id="age-container"> <h1 id="age">27</h1> </div>

Another option would be to use a font that already looks the way you need it to (like these ).

Answer 2

The issue in 2020 with:

• text-stroke
• text-stroke-width
• text-stroke-color
• text-fill-color

is that - despite having been around for over half a decade - these are still experimental properties and have never yet been added to any offical spec (either W3C or WHAT-WG ).

That's why, even though text-stroke now has wide support from browsers, all browsers (including Firefox) only support text-stroke with the -webkit prefix:

-webkit-text-stroke

See: https://caniuse.com/#feat=text-stroke

---

Using the -webkit- browser vendor prefix may not be an issue for you.

But if it is, there is another way to visually display a text-stroke-outlined transparent number within:

<h1 id="age">27</h1>

and that's to apply an SVG image background to the <h1> element.

Working Example:

 body { display: flex; justify-content: center; align-items: flex-start; } #age { position: relative; font-family: sans-serif; color: rgba(0, 0, 0, 0); background-image: url("https://images.pexels.com/photos/1749/fire-orange-emergency-burning.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); } #age[data-age="27"]::after { content: ''; position: absolute; top: 0; left: 0; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 400 400'><text x='204' y='320' text-anchor='middle' stroke='rgb(255, 255, 255)' stroke-width='6' fill='rgba(0, 0, 0, 0)' style='font: 320px sans-serif; font-weight: 700;'>27</text></svg>"); } #age, #age[data-age="27"]::after { width: 400px; height: 400px; background-repeat: no-repeat; background-position: center; }

 <h1 id="age" data-age="27">27</h1>