Question

我使用伪p：first-of-type :: first-letter元素和一些样式效果，使用dropcap剪切背景图像设计了一个印刷dropcap元素。现在，＆＃39; -webkit-text-fill-color：transparent＆＃39;因某种原因没有被阅读（这是因为它是一个伪元素？）。我的文本剪辑背景图像出现的唯一方法是应用＆＃39; color：transparent＆＃39;。但是，这意味着我无法设置颜色：＆＃39;其他浏览器的后备。为什么webkit-text-fill-color不起作用，还有另一种创建firefox /浏览器友好后备的方法吗？

这是我到目前为止的一个方面：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-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;
         }
    }
}

-webkit-text-fill-color不适用

1 个答案: