css-Transparent text cut out of background

5,639 2020-07-15 17:03:57

It's possible with css3 but it's not supported in all browsers

With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1337/

Automatic Alignment

With a little javascript you can align the background automatically:

$(document).ready(function(){
  //Position of the header in the webpage
  var position = $("h1").position();
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1336/

Gijs 2012-12-18 12:53:35

A you people are TOO fast :D

Love Dager 2012-12-18 13:26:45

Oh great! I will test the auto alignment as fast as I get home! Thank you! :D

Gijs 2012-12-18 13:32:26

you maby need to alter the code a bit, depends on the situation, now it could conflict with other elements and this one was written really fast, if you have any questions i will hear them

tanius 2015-10-17 14:49:07

Not to disregard the answer, which is a really nice solution, but background-clip:text is a Webkit-only, non-standard option. CSS3 does not allow the text value for this attribute (see).

Vince 2017-02-20 04:06:17

This technique allows you to see the background of the element where the text would normally be. I'm looking for a way to see what's under the element with the text through the place where the text would normally be.

Transparent text cut out of background

Automatic Alignment

热门帖子

热门github