How to Do Knock-Out/Punch-Through Transparency with CSS Fonts

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

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.

How do I make punch-through transparent text in HTML/CSS?

you can not do this directly; You should use an image for this, or svg might do the trick but that's a hell of a lot more complicated and browsers do not all support it that well.

CSS knockout text effect + text-shadow on a background image

Starting from Hunter Turner answer, it's possible to improve it with CSS Blend Mode. This way the background image of the container can be blended to the text, resulting in what you wanted to do. However, remember it hasn't broad support yet.

html, body {  margin: 0;  padding: 0;}
.container {  width: 400px;  height: 200px;  display: flex;  justify-content: center;  align-items: center;  background: url('http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg');  background-size: contain;}
.container p {  font-weight: bold;  font-size: 60px;  font-family: Helvetica, Arial, sans-serif;  color: rgba(255, 255, 255, .45);  text-shadow: 4px 4px 6px #fff, 0 0 0 #000, 4px 4px 6px #fff;  mix-blend-mode: multiply;}

<div class="container">  <p>Hello World</p></div>

Make the text part of a div transparent

One of the ways to accomplish your specification using only CSS is to overlap the two background images perfectly thereby creating a "transparent" effect that you've described. Here's a fiddle: http://jsfiddle.net/v780v1Ln/.

Note: paddings and such alter the dimensions of the element and affect the coordinates that must be set for background images.

HTML:

<div id = "wrapper">
    <h1><span>DRD</span></h1>
</div>

CSS:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    background: #e2e2e2;
}

#wrapper {
    position: absolute;
    width: 70%;
    height: 50%;
    top: 25%;
    left: 15%;
    background: url(http://i58.tinypic.com/2vdieso.jpg)
                no-repeat
                0 0/500px 362px;
}

#wrapper > h1 {
    background-color: #fff;
    text-align: center;
    position: absolute;
    padding: 0 55px 0 25px;
    top: 25px;
    left: 25px;
}

#wrapper > h1 > span {
    font: bold 70px/1 Sans-Serif;
    text-transform: uppercase;
    background: url(http://i58.tinypic.com/2vdieso.jpg)
                no-repeat
                -45px -25px/500px 362px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

Combining semi transparency of background image with keyframe animation

I am not aware of any way currently to directly affect the opacity of the background image as you seek. Two possible workarounds are:

1. Pure CSS3 way (not well supported yet)

Using a pseudo-element to supply the background-image allowed opacity to be used and keep the whole thing as pure css, but it did not work on webkit (which apparently does not support animation on pseudo-elements), only on the moz extension (I could not test IE10... feedback on that would be helpful). Compare Firefox with Chrome for this fiddle, which used this code:

HTML

<div class="bkgAnimate">Foreground text</div>

CSS

.bkgAnimate {
    width: 300px; /*only for demo*/
    height: 200px; /*only for demo*/
    position: relative;
    z-index: 1; /* make a local stacking context */
}

.bkgAnimate:after {
    content: '';
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(src="your/image/path/file.png") no-repeat;
    z-index: -1;  
    -webkit-animation: fontbulger  3s infinite;
    -moz-animation:    fontbulger  3s infinite;
    -ms-animation:     fontbulger  3s infinite;
}
@-webkit-keyframes fontbulger {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@-moz-keyframes fontbulger  {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@-ms-keyframes fontbulger  {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}

2. Cluttered HMTL solution (more cross browser friendly)

Changing to put an actual img tag in as the background seemed to be the only way to get webkit to behave, as this fiddle shows. But that may not be desirable for you. Code similar to above except:

HTML

<div class="bkgAnimate">Foreground text 
  <img class="bkg" src="your/image/path/file.png"/>
</div>

CSS change from above

Change the :after selector to .bkgAnimate .bkg and remove the content and background property from that code.

CSS - knock-out / see-through effect on background images

I think the idea here is that the image must be large enough to cover the webpage or at least the parent div..

Then you can apply the image to the background of both the container and the 'inner'div.

The overlay can be achieved by way of a pseudo-element rather than a separate div.

Revised structure -

.bck {    position: relative;    height: 800px;    width: 100%;    background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);    background-repeat: no-repeat;    background-position: center center;}.bck::before {    content:'';    position: absolute;    height: 100%;    width: 100%;    top: 0;    left:0;    background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);}.box {    border: 10px solid white;    padding: 80px;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    color: red;    font-size: 30px;    background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);    background-position: center center;}

<div class="bck">    <div class="box">        <p>Text goes here</p>    </div></div>