为什么背景剪辑在 Edge 上不起作用？答案

【问题标题】：Why doesn't background-clip work on Edge?为什么背景剪辑在 Edge 上不起作用？
【发布时间】：2019-11-29 05:03:00
【问题描述】：

我在我网站的标题 h2 上使用背景剪辑，但不知何故不适用于 Edge。在 Chrome 和 Firefox 中很棒，但是当我在 Edge 中打开时，标题 h2 在那里但透明（我猜）。我检查了 caniuse.com 并说边缘支持。所以我不明白为什么每个浏览器都少用这个。

我使用了相同的@supports(-webkit-background-clip:text) 以防万一它不支持，但因为它受支持不起作用并且标题是透明的。

这是我的代码：

.heading__secondary{

    text-transform:uppercase;
    font-size:$default-heading2-size;
    letter-spacing:0.3rem;
    font-weight:600;
    line-height:1.5;
    background-image:linear-gradient(to right, $color-secondary-dark, $color-primary-dark);
    display:inline-block;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent; 
    transition:all .2s ease-in-out;


    &:hover {
        transform: rotate(-2deg) scale(1.06);
    }

我只想知道我必须做什么才能在 Edge 上显示，就像在其他浏览器中显示一样。

【问题讨论】：

标签： css microsoft-edge browser-support

【解决方案1】：

我尝试测试来自 MDN 站点的示例代码，它看起来背景剪辑的示例在 MS Edge 浏览器中运行良好。

参考：

background-clip

我还尝试在上面测试您的代码。如果您尝试使用开发人员工具查看应用的样式，您会注意到 background-image 和 &:hover 未应用。

我在 chrome 和 Edge 浏览器中都得到了类似的结果。这可能是问题的根本原因。您可以在下图中注意到 background-clip 在 Edge 和 chrome 浏览器中都成功应用了。

这意味着一些其他样式的代码创建了这个问题。我建议您使用开发人员工具查找网页上任何特定元素的应用样式，这可能会帮助您找到导致此问题的原因。

如果问题仍然存在，请尝试提供详细的代码示例，包括您的相关 CSS 和 HTML 代码，这可能会导致 MS Edge 浏览器出现问题。如果您还尝试包含 chrome 输出的快照会更好，Edge 可以帮助我们更好地理解问题。

【讨论】：