css - 为什么背景剪辑在 Edge 上不起作用？

Question

我在我网站的标题 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 上显示。

Answer 1

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

引用:

background-clip

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

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

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

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