-webkit-text-fill-color 不适用答案

【问题标题】：-webkit-text-fill-color not applying-webkit-text-fill-color 不适用
【发布时间】：2016-03-22 01:37:36
【问题描述】：

我已经使用伪 p:first-of-type::first-letter 元素和一些样式效果设置了带有 dropcap 剪辑背景图像的印刷首字母大写元素的样式。现在，'-webkit-text-fill-color:transparent' 由于某种原因没有被读取（这是因为它是一个伪元素吗？）。我的文本剪辑背景图像出现的唯一方法是应用“颜色：透明”。但是，这意味着我无法为其他浏览器设置“颜色：”回退。为什么 webkit-text-fill-color 不起作用，还有其他方法可以创建对 firefox/ie 浏览器友好的回退吗？

这是我目前所拥有的一个 jsfiddle：https://jsfiddle.net/v5j9mk95/

CSS：

    .nc-exp-article:not(.nc-exp-article-internal) > p:first-of-type::first-letter,
.nc-exp-divider + p::first-letter {
  font-style: italic;
  font-weight:500;
  font-size:92px;
  line-height:84px;
  float:left;
  padding-right:5px;
  margin-left:5px;
  margin-right:5px;

  color: white;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url('https://s-media-cache-ak0.pinimg.com/236x/2f/13/08/2f13084ef9fb63af92e951ae50e80bc4.jpg');
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
}

【问题讨论】：

标签： html css webkit

【解决方案1】：

您可以在媒体查询中检查-webkit-min-device-pixel-ratio:0 以定位基于webkit 的浏览器：

以下示例将在 Firefox/IE 中显示白色文本，但在 Chrome/Safari (webkit) 中将显示您的 -webkit-text-fill-color

https://jsfiddle.net/v5j9mk95/5/

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @supports (not(-ms-accelerator:true)) and (not(-moz-appearance:none)) {      
        /* webkit based browsers CSS rules go here */
    } 
 }

你的 CSS 完全是这样的：

.nc-exp-article:not(.nc-exp-article-internal) > p:first-of-type::first-letter,
.nc-exp-divider + p::first-letter {
    font-style: italic;
    font-weight:500;
    font-size:92px;
    line-height:84px;
    float:left;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
    color:white;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @supports (not(-ms-accelerator:true)) and (not(-moz-appearance:none)) {

        .nc-exp-article:not(.nc-exp-article-internal) > p:first-of-type::first-letter,
        .nc-exp-divider + p::first-letter {
            color: transparent;
            -webkit-text-fill-color: transparent;
            background: -webkit-linear-gradient(transparent, transparent), url('https://s-media-cache-ak0.pinimg.com/236x/2f/13/08/2f13084ef9fb63af92e951ae50e80bc4.jpg');
            background: -o-linear-gradient(transparent, transparent);
            -webkit-background-clip: text;
         }
    }
}

【讨论】：