-webkit-text-fill-color沒有應用

Question

我已經使用僞p：first-of-type :: first-letter元素和一些樣式效果使用dropcap剪裁了背景圖像來設計印刷dropcap元素。現在，'-webkit-text-fill-color：transparent'不會被某些原因讀取（這是因爲它是一個僞元素嗎？）。我的文字剪輯背景圖像出現的唯一方法是應用'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; 
} 
} 

Answer 1

您可以在媒體查詢目標webkit基於瀏覽器檢查-webkit-min-device-pixel-ratio:0：

下面的例子將在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; 
     } 
    } 
}