Как извлечь цвет текста из фона с помощью css или js

Я пытаюсь достичь этого http://prntscr.com/b912c0 на моей html странице.
Я пробовал использовать режимы смешивания-смешивания, но он не работает, как это в прикрепленной ссылке изображения.

Есть трюки?

1 ответ

  1. Я думаю, что это может быть то, что вы ищете. Конечный результат работает в браузерах , использующих webkit, и есть запасной вариант для тех, кто этого не делает. Я использую FF Developer Edition и Google Chrome , и он работает в обоих из них, однако это запасной вариант раскрывается в IE и в обычной версии FF.

    Вот ссылка на то, где я ее создал… http://codepen.io/fishgraphics/pen/b7eade9e3c83e8c8c173fe448f175d92

    Мясо его в 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;
    }
    

    С малюсеньким битом используя 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;
       });
    
    });