Can I do knock-out/punch-through transparency with

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.

标签： css transparency opacity

6条回答

虎瘦雄心在

2楼-- · 2020-02-01 02:26

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.

0人赞添加讨论(0) 举报

Explosion°爆炸

3楼-- · 2020-02-01 02:27

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;

}

0人赞添加讨论(0) 举报

Bombasti

4楼-- · 2020-02-01 02:28

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.

0人赞添加讨论(0) 举报

forever°为你锁心

5楼-- · 2020-02-01 02:29

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.

0人赞添加讨论(0) 举报

欢心

6楼-- · 2020-02-01 02:48

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.

0人赞添加讨论(0) 举报

Bombasti

7楼-- · 2020-02-01 02:51

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

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

0人赞添加讨论(0) 举报

Can I do knock-out/punch-through transparency with

Edit

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间