为什么带阴影的渐变文本在Firefox中有效但在Chrome中无效？

Question

我觉得我错过了一些明显的愚蠢，但也许有人可以帮助我。

我一直在尝试使用最初在Photoshop中设计的两个文字阴影重新创建渐变文字样式，而在Firefox 中，我似乎已经实现了我的目标。但第二个我在Chrome中打开它？渐变消失。

我做错了什么？

＆＃13;

＆＃13;

.field {
  font-size: 25px;
  background: -moz-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* IE10+ */
  background: linear-gradient(90deg, #e90e94 0%, #800851 100%); /* W3C */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  font-family: Arial Black;
  font-weight: 400;
  height: 50px;
  position: absolute;
  text-transform: lowercase;
  width: 180px;
}

.field:after {
  background: none;
  content: attr(data-text);
  left: 0;
  position: relative;
  text-shadow: 2px 1px 0 rgb(255, 255, 255), 3px 2px 2px rgba(85, 85, 85, 0.7);
  z-index: -1;
}

＆＃13;

<span class="field" data-text="bad karma"></span>

＆＃13;

＆＃13;

＆＃13;

编辑由于这是供应商前缀的问题，有没有办法实现实际上跨浏览器兼容的相同结果？

Answer 1

问题是：之后没有任何背景。至少在目前的chrome中，它需要具有剪辑背景

.field:after {
  background: inherit; /* update this */
  content: attr(data-text);
  left: 0;
  position: relative;
  text-shadow: 2px 1px 0 rgb(255, 255, 255), 3px 2px 2px rgba(85, 85, 85, 0.7);
  z-index: -1;
}

问题在于，在文本中，文本阴影将出现在文本上，因为文本“实际上并不存在”

如果它在元素本身完成而不是在：之后一切正常，除非你真的需要它，因为只考虑用css制作一个实际的元素。

修改

另一种解决方案是将文本添加到数据文本和跨度内部，并在完全定位后进行：

<span class="field" data-text="bad karma">bad karma</span>

和

.field:after {
  background: none;
  content: attr(data-text);
  left: 0;
  position: absolute; /* change this */
  text-shadow: 2px 1px 0 rgb(255, 255, 255), 3px 2px 2px rgba(85, 85, 85, 0.7);
  z-index: -1;
}