Question

我正在尝试在我的html页面中实现此http://prntscr.com/b912c0。我尝试过使用混合混合模式，但它不能像附加的图像链接一样工作。

任何技巧？

Answer 1

我认为这可能是您正在寻找的。最终结果适用于使用 webkit 的浏览器，并且对于那些不使用的人来说，这是一个后备。我使用的是 FF开发者版和谷歌浏览器，它适用于这两种方式，但它的后备版本在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;
   });

});

如何使用css或js从背景中减去文本颜色

1 个答案: