如何使用CSS或JS从背景中减去文本颜色

Question

我正在尝试在HTML页面中实现此http://prntscr.com/b912c0 。 我尝试使用混合混合模式，但是它不起作用，因为它在附加的图像链接中。

有什么花招吗？

Answer 1

我认为这可能是您要寻找的。 最终结果可以在使用webkit的浏览器中使用，而对于那些不使用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;
   });

});