Question

无论如何都使用此文本渐变方法，并且在文本上也有阴影。 http://css-tricks.com/snippets/css/gradient-text/

当我设置像

这样的阴影时

text-shadow: 1px 1px 2px #000;

然后它会弄乱我的文本渐变，因为背景设置为透明。有没有人知道webkit浏览器的解决方案。

Answer 1

<强>更新

为您找到解决方案，唯一的问题是它需要html具有属性。

http://jsfiddle.net/2GgqR/2/

h1 {
  font-size: 72px;
  background-image: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;  
}

h1:after {
  background: none;
  content: attr(data-text);
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  text-shadow: 1px 1px 2px #000;
}

原文在这里:) http://viget.com/inspire/background-clip-text-shadow-gradients

来自评论的

更新链接 http://jsfiddle.net/2GgqR/5/

在这里我将背景的背景颜色添加到：after

之后

h1:after {
  background: #f3f3ee;
}

.background{
    background-color: #f3f3ee;
    position: relative;
    z-index: 1;
}

Answer 2

您可以与filter: drop-shadow CSS属性结合使用。

＆＃13;

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px #333);
}

＆＃13;

<h1>Example</h1>

＆＃13;

Answer 3

我可能真的对此赞不绝口，但我相信唯一的方法就是将重复的元素放在后面。这只是一个想法。

Answer 4

我已经找到了不使用filter和z-index的解决方案。如果您有背景或前景，可以使用此方法：

h1 {
    position: relative;
}

h1::after {
    background-image: linear-gradient(#f00, #fcc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
}

h1::before {
    text-shadow: #000 1px 1px 2px;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
}

效果：https://jsfiddle.net/m9dtf6po/2/

当然，由于我使用的是::before和::after，因此需要一个属性，但是可以共享该属性。使用z-index的问题是：

如果图层后面有任何元素，阴影将消失（请参见https://jsfiddle.net/m9dtf6po/3/）；或
如果图层前面有任何元素，则文本将显示在这些元素的前面（请参见https://jsfiddle.net/m9dtf6po/4/）。

这是我的背景和前景夹着文本时遇到的问题，如下图所示：

文本S+必须位于条形图的顶部，但最重要的是可以有一个框。我实际上找到了这篇文章，并尝试了Karl的解决方案，但阴影消失在酒吧后面。

css中的渐变文本与文本阴影

4 个答案: