Question

我的网站上有一个产品配置器。用户可以在衣服上书写单词，并在产品图像上显示文字。

我想将这个文字的样式看起来像刺绣。所以我放了一个文字阴影，文字颜色随产品颜色的变化而变化，但现在，我想在颜色上加一个“过滤器”。

约束：我只能访问CSS。

这是我做过的小提琴：

  #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

我终于做到了.. 结果不是我的预期，但它的工作原理。对于有一天会尝试做同样事情的人来说，这是最后的小提琴：

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;



}

Answer 2

您可以使用rgba

将背景图像添加到透明文本阴影的透明文本中

#text{ font-size:90px; text-align:center; font-family:'petit_formal_script'; -webkit-font-smoothing:antialiased; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); color:transparent; 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; }

Answer 3

这就是你的意思吗？

#text {
    background: url(http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png) repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    font-size:90px;
    text-align:center;
    font-family:'petit_formal_script';
}

如何在彩色文本上剪辑背景（仅限css）

3 个答案: