<div>
  <span class="text-first js-text-transparent">Просвечивающий текст</span>
</div>
<div>
  <span class="text-second js-text-transparent">Просвечивающий текст в несколько строк</span>
</div>

body {
  background-color: #34495D;
  background: url('http://goodfon.org/_ph/29/2/541097316.jpg');
  background-size: cover;
}
.text-first,
.text-second,
.text-third {
  color: #000;
  padding: 25px 20px 15px;
  margin: 10px;
  display: inline-block;
  line-height: 1;
}
.text-first {
  font-size: 50px;
  background-color: #EE7738;
}
.text-second {
  font-size: 40px;
  background-color: #F59D2A;
  max-width: 500px;
}

;(function ( $, window, document, undefined ) {
    var pluginName = 'punchout',
        defaults = {
        };

    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype.init = function () {
        e = $(this.element);
        i = $('.punchout').length;

        style = document.defaultView.getComputedStyle(this.element, "");

        width   = parseInt(e.width());
        height  = parseInt(e.height());

        p_top    = parseInt(style.paddingTop     || 0);
        p_bottom = parseInt(style.paddingBottom  || 0);
        p_left   = parseInt(style.paddingLeft    || 0);
        p_right  = parseInt(style.paddingRight   || 0);

        width += p_left + p_right + 1;
        height += p_top + p_bottom + 1;

        id = "punchout_" + i;
        classes = e.attr('class').split(' ');
        classes.push('punchout');
        e.after('<canvas width="' + width + 'px" height="' + height + 'px" class="' + classes.join(' ') + '" id="' + id + '"></canvas>');
        canvas = document.getElementById(id);
        ctx = canvas.getContext('2d');

        canvas.style.cssText = style.cssText;
        canvas.style.backgroundColor = 'transparent';
        canvas.style.padding = 0;
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';

        alpha = parseFloat(e.css('background').split(' ').slice(3, 4));
        ctx.globalAlpha = 1.0;

        colour = e.css('backgroundColor');
        font = [
            e.css('fontStyle'),
            e.css('fontVariant'),
            e.css('fontWeight'),
            e.css('fontStretch'),
            e.css('fontSize'),
            '/',
            e.css('lineHeight'),
            e.css('fontFamily')
        ].join(' ');

        ctx.fillStyle = colour;
        ctx.fillRect(0, 0, width, height);
        ctx.font = font;
        ctx.textBaseline = 'hanging';
        ctx.globalCompositeOperation = 'destination-out';

        text = e.html();

        switch (e.css('textTransform')) {
            case 'uppercase':
                text = text.toUpperCase();
                break;
            case 'lowercase':
                text = text.toLowerCase();
                break;
        }

        function overflow(text) {
            return ctx.measureText(text, p_left, p_top).width > (width - p_left - p_right);
        }

        if (overflow(text)) {
            //  TODO: This effectively re-implements text wrapping.
            //        It does not take into account the correct text metrics.
            //        It is a giant hack. Fix it.
            lines = [];
            while (text.length > 0) {
                var i;
                words = text.split(' ');
                for (i = words.length; overflow(text); i--) {
                    text = words.slice(0, i).join(' ');
                }
                lines.push(text);
                text = words.slice(i + 1, words.length).join(' ');
            }
            for (l in lines) {
                ctx.fillText(lines[l], p_left, l == 0 ? p_top : ((l / lines.length) * height));
            }
        } else {
            ctx.fillText(text, p_left, p_top);
        }
        e.remove();
    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

(function() {

  setTimeout(function(){$('.js-text-transparent').punchout();}, 500);

})();