css - 如何在彩色文本上剪辑背景(仅在 css 中)

Question

我的网站上有一个产品配置器。用户可以在衣服上写一个字，产品图片上就会出现文字。

我想将此文本设置为看起来像刺绣。所以我放了一个文字阴影，文字颜色随着产品颜色的变化而变化，但现在，我想在颜色上放一个“滤镜”。

约束:我只能访问 CSS。

这是我做的 fiddle :

  #text
{
    font-size:90px;
    text-align:center;
    font-family:'petit_formal_script';
    -webkit-font-smoothing:antialiased;
    text-shadow: 2px 2px 2px black;
    color:lightblue;
}

#text:after
{
    content:'';
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg');
    -webkit-background-clip:text;
    -moz-background-clip:text;
    -webkit-text-fill-color:transparent;
}

http://jsfiddle.net/u2to713t/

提前致谢。

Answer 1

我终于做到了.. 结果不是我所期望的，但它有效。 对于有一天会尝试做同样事情的人来说，这是最后的 fiddle :

http://jsfiddle.net/u2to713t/13/

#text
{
    font-size:90px;
    text-align:center;
    font-family:'petit_formal_script';
    -webkit-font-smoothing:antialiased;
    text-shadow: 1px 2px 3px #474747;
    color:lightblue;
}

#text:before
{
     content: attr(data-text);
    position:absolute;
    left:-1px;
    top:7px;
    right:0;
    bottom:0;
    opacity:1.0;
    z-index: 1;
   color:transparent;
    text-shadow:0px 0px 0px;
    background:url("http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png"); 
    -webkit-background-clip:text;
    -moz-background-clip:text;
     background-clip:text;



}