Can I do knock-out/punch-through transparency with CSS fonts?

I would like to know if there is any way I can apply 100% transparency to text so that we can see the background picture of the page within the characters in the text.

i.e. imagine I’ve got a <div> with a white background, and a background image on <body>. I’d like to set the text inside the <div> so that the background image on <body> can be seen through the text, despite the white background on the <div>.

I could probably use an inverted font but I would prefer a better way to do it if there is one.

Esteban Küber

Does it have to be dynamic? The only way to do that is with an image with transparency (GIF or, better, PNG).

I'm not sure if this is what you want, but will explain it anyway.

Situation: you have a non plain background that you want to bee seen through your text.

Solution: no CSS is coming to the rescue for this. You'll have to use your trusty image editor to create a layer with text, and another layer that will be the negative of your text

This could allow you to have some interesting effects, but if you want it to be dynamic, you'll have to generate the images on the fly serverside.

This kind of trickery is currently impossible with pure CSS (might be possible with Javascript).

Edit

Seeing Paul's find on webkit got me thinking on how to fake that behavior in Firefox, Opera and IE. So far I've had good luck using the canvas element on Firefox, and I'm trying to find some behavior in filter:progid:DXImageTransform.Microsoft.

So far with canvas, this is what I did

<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);

// set composite property
ctx.globalCompositeOperation = 'destination-out'; 
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);  
ctx.strokeText("red rectangle", 10, 40);  

</script>
</body>
</html>

by using a detination-out compositing and drawing text on the canvas.

I’m not exactly clear what you’re asking (100% transparency means that something’s invisible, and invisible text isn’t generally a great idea), but in general:

The CSS opacity property applies to an entire element, not just its text. So if you have this HTML:
```
<div class="opacity-50">
    This is a div with a background colour and 50% opacity
</div>
```
And this CSS:
```
.opacity-50 {
    background: #ccc;
    color: #000;
    opacity: 0.5;
}
```
Then both its background and its text will have 50% opacity.

rgba colour values allow you to specify semi-transparent colours. So, if you have this HTML:

<div class="text-opacity-50">
    This is a div with semi-transparent text
</div>

And this CSS:

.text-opacity-50 {
    background: #ccc;
    color: rgba(0,0,0,0.5);
}

Then only its text will have 50% opacity.

I think rgba colour values are supported by slightly fewer browses than opacity.

Paul D. Waite

Ah — if you’re talking about “punch-through” transparency, no, CSS doesn’t do this.

Except for WebKit (the rendering engine in Safari and Chrome), which has a totally custom, made-up-by-Dave-Hyatt, not-even-in-CSS-3 property value, -webkit-background-clip: text;.

No other browser other than Safari and Chrome supports it.

You can spent the time to make your own font with InkScape and IcoMoon and make a negative knocked out font, then your letters can be see trough! I used this technique for some see trough Icons.

Why not try to set the DIV's background image to a completely transparent GIF?

http://www.pageresource.com/dhtml/csstut9.htm

user2116899

Using a .png without background is a good method. In Photoshop you can save for the web.

or in css:

#div
{
    background:transparent;
    color:whatever;

}

来源：https://stackoverflow.com/questions/2289159/can-i-do-knock-out-punch-through-transparency-with-css-fonts

标签

css

transparency

opacity