css background-clip：文本在1个浏览器窗口中工作，而不是其他？

a5g8bdjr 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(126)

我知道在arc.dev网站上，有background-clip: text属性的用法。

我看了一下源代码，HTML是：

<span class="sc-b8c3677-0 hxpAlL">remote job search</span>

右键单击->复制样式给我：

-webkit-font-smoothing: antialiased;
    text-align: center;
    color: white;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 46px;
    line-height: 51px;
    box-sizing: inherit;
    display: inline-block;
    background-position-x: 0px;
    background-size: 200%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: rgb(56, 123, 255);
    background-image: linear-gradient(90deg, rgb(162, 68, 255) 0%, rgb(52, 182, 255) 50%, rgb(162, 68, 255) 100%);
    animation: 3s ease-in-out 0s infinite normal none running bHafHd;

我把它变成：

<!DOCTYPE html>
<html>
  <body>
    <style>
      .foo {
        -webkit-font-smoothing: antialiased;
        text-align: center;
        color: white;
        font-family: Inter, sans-serif;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.02em;
        font-size: 46px;
        line-height: 51px;
        box-sizing: inherit;
        display: inline-block;
        background-position-x: 0px;
        background-size: 200%;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-color: rgb(56, 123, 255);
        background-image: linear-gradient(
          90deg,
          rgb(162, 68, 255) 0%,
          rgb(52, 182, 255) 50%,
          rgb(162, 68, 255) 100%
        );
        animation: 3s ease-in-out 0s infinite normal none running bHafHd;
      }
    </style>
    <span class="foo">remote job search</span>
  </body>
</html>

然而，这不能正确地渲染。我的浏览器显示background-clip: text是一个无效的属性值，尽管我知道它在我的浏览器中在arc.dev上正确呈现。
我做错了什么？
页面：

我的页面：

css

来源：https://stackoverflow.com/questions/76541983/background-clip-text-working-in-1-browser-window-but-not-the-other

2条答案

按热度按时间

luaexgnf1#

背景剪辑：text;属性并不被所有浏览器广泛支持，这可能解释了您遇到的错误。
若要实现所需的渐变背景剪裁到文本的效果，可以组合使用背景和文本效果。下面是一个更新版本的代码，应该可以在不同的浏览器中工作：

<!DOCTYPE html>
<html>
  <body>
    <style>
      .foo {
        -webkit-font-smoothing: antialiased;
        text-align: center;
        color: transparent;
        font-family: Inter, sans-serif;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.02em;
        font-size: 46px;
        line-height: 51px;
        box-sizing: inherit;
        display: inline-block;
        background: linear-gradient(
          90deg,
          rgb(162, 68, 255) 0%,
          rgb(52, 182, 255) 50%,
          rgb(162, 68, 255) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: 3s ease-in-out 0s infinite normal none running bHafHd;
      }
    </style>
    <span class="foo">remote job search</span>
  </body>
</html>

在此更新的代码中，-webkit-background-clip属性用于基于WebKit的浏览器（如Safari），background-clip属性用于其他现代浏览器。通过将背景剪裁设置为text，背景渐变将被剪裁到文本。
为确保文本不可见，color属性设置为transparent，-webkit-text-fill-color属性设置为transparent。这将使文本透明，从而允许显示剪裁的背景。
通过这些调整，<span>元素中的文本与类foo现在应该有一个渐变背景剪裁到文本上，从而创建所需的效果。

赞(0）回复(0）举报 2023-06-25

jgwigjjp2#

TL;DR有些浏览器只支持text，不支持background-clip。同时使用这两个属性，以便不支持的浏览器可以回退到前缀属性。

假设您正在使用Chrome。*

一些浏览器仍然不支持background-clip属性的text值，仅支持前缀版本-webkit-background-clip。请参阅MDN docs以了解完整的详细信息。目前它是Chrome，Opera和三星互联网。
至于复制，Arc使用React和Stylled Components（参见研究部分）。由于Chrome DevTools对样式化组件的行为（我相信样式是动态添加的），它不显示前缀属性，只显示普通属性，并且不显示任何警告。因此，您复制的样式只包含unprefixed属性，它实际上不支持Chrome中的text值。

**解决方案是同时使用-webkit-background-clip和background-clip，**这样不支持text无前缀属性的浏览器可以回退到前缀属性。

Demo

下面的演示有两行文本，第一行仅包含unprefixed属性，第二行同时包含unprefixed和prefixed属性。
我把款式精简了一点。其中很多是为了向后兼容性（不支持带有渐变的background-image的后备背景等）。

.normal {
  background-clip: text;
}

.both {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Base styles */

.text {
  -webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 46px;
  line-height: 51px;
  background-size: 200%;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgb(162, 68, 255) 0%,
    rgb(52, 182, 255) 50%,
    rgb(162, 68, 255) 100%
  );
}

<span class="text normal">remote job search</span>
<br>
<span class="text both">remote job search</span>

研究

这个元素有sc-b8c3677-0和hxpAlL类。
在arc.dev的脚本中搜索sc-b8c3677-0（通过DevTools > Application > Frames > Scripts），我在下面找到了它：

g = o.default.span.withConfig({
  componentId: "sc-b8c3677-0"
})(c(), p)

这就是Styled Components（我相信），它创建了一个ID为sc-b8c3677-0的“组件”。
Stylled Components然后将类hxpAlL添加到该元素中。
相关代码（来源于“（index）”）：

/*!sc*/
data-styled.g162[id="sc-b8c3677-0"] {
  content: "hxpAlL,"
}

<span class="sc-b8c3677-0 hxpAlL">remote job search</span>

我相信样式（来自类hxpAlL）是以某种方式动态添加的，因为

它们不会出现在实际的最终DOM中;
它们是斜体字，不可编辑;
该块链接到的样式元素是空的并且具有属性data-styled="active"。

我对Chrome隐藏属性前缀版本有一个模糊的回忆，此外它有时显示短手而不是长手。我不记得关于这些的确切bug报告，但我会尝试找到它们。
认为涉及样式化组件的理由：

style元素涉及属性data-styled="active"和data-styled-version="5.3.6"（最新的Styled Components版本是5.3.11）。
源代码中的样式块上面有一个/*!sc*/的“魔术注解”。
o.default.span.withConfig代码与源代码中样式化组件的使用风格相匹配。
它与React一起使用是很常见的。

赞(0）回复(0）举报 2023-06-25

我来回答

css background-clip：文本在1个浏览器窗口中工作，而不是其他？

2条答案

Demo

研究

相关问题

热门标签

最新问答