Question

在CSS3中，可以“剪辑”文本，使其显示为剪切，以便您可以使用

查看其背后的背景

-webkit-background-clip: text;

与

结合使用

-webkit-text-fill-color: transparent;

我们使用前缀，因为这是相当新的，并不是所有浏览器都支持。但是，我注意到你实际上并不需要使用 -webkit-text-fill-color：transparent ，而只需编写 color：transparent 。

所以我的问题是：使用 -webkit-text-fill-color：透明而非颜色：透明有什么好处？

您可以在下方看到两者的比较。

body{background: teal}

p{
    font-family: sans-serif;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    
    background: url(http://www.jpl.nasa.gov/spaceimages/v2/getMediumImage.php?id=PIA03519) center center;
    
    -webkit-background-clip: text;
    
    -webkit-animation: textMask 10s linear infinite;
    animation: textMask 10s linear infinite;
}

.text-fill {
    -webkit-text-fill-color: transparent;
}

.normal {
    color: transparent;
}

@-webkit-keyframes textMask {
    from {background-position: right bottom}
    to {background-position: left top}
}
@keyframes textMask {
    from {background-position: right bottom}
    to {background-position: left top}
}

<p class="text-fill">I am using text-fill-color</p>
<p class="normal">I am just using color</p>

Answer 1

-webkit-text-fill-color只是color的特定于WebKit的变体，与-webkit-text-fill-stroke一起使用（正如您所见，-webkit-background-clip: text。它记录在Safari CSS Reference。

-webkit-text-fill-color和color之间没有区别，除了指定两个属性时，WebKit将使用前者。您可以利用此优势来指定文本仅在基于WebKit的浏览器中是透明的，以允许-webkit-background-clip: text工作，同时在其他浏览器中优雅地降级为其他颜色。

-webkit-text-fill-color并不新鲜。它可能从一开始就是WebKit的一部分。无论谁告诉你它是一些新的和即将推出的标准的一部分同样被误导了。抛出-moz-和-o-前缀 - 它们对于此属性不存在，因为它再次是WebKit特定的，而不是CSS3的所有部分。

是否正在使用text-fill-color来剪切css中的文本？

1 个答案: