How to substract text color from a background using css or js

Question

I am trying to achieve this http://prntscr.com/b912c0 in my html page. I have tried using mix-blending modes but it doesnt work as it is in the image link attached.

Any tricks?

Answer 1

I think this may be what you're looking for. The end result works in browsers that use webkit, and there's a fallback for those that don't. I'm using FF Developer Edition and Google Chrome, and it works in both of those, however it the fallback is revealed in IE and in the regular version of FF.

Here's a link to where I've created it... http://codepen.io/fishgraphics/pen/b7eade9e3c83e8c8c173fe448f175d92

The meat of it is in CSS

html {
   background: #ceb691 url('http://img0.mxstatic.com/wallpapers/0f458fce470938f1695a8f9865485f17_large.jpeg') center no-repeat fixed;
}

header {
   background: rgba(0, 0, 0, 0.8);
}

.backgroundclip h1 {
   background: url('http://img0.mxstatic.com/wallpapers/0f458fce470938f1695a8f9865485f17_large.jpeg') center no-repeat fixed;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

h1 {
   width: calc(100% - 60px);
   margin-top: 200px;
   font-size: 5em;
   padding: 60px 30px;
   text-align: center;
   color: orangered;
}

With a tiny bit utilizing Modernizr:

Modernizr.addTest('backgroundclip', function() {

   var div = document.createElement('div');

   if ('backgroundClip' in div.style)
      return true;

   'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g, function(val) {
      if (val + 'BackgroundClip' in div.style) return true;
   });

});