Android/Chrome 是不是完全支持 background-clip CSS 属性？在 PC 和 Mac 上的 FF/Chrome 中运行良好

Posted 2023-02-25

【中文标题】Android/Chrome 是不是完全支持 background-clip CSS 属性？在 PC 和 Mac 上的 FF/Chrome 中运行良好

【英文标题】：Does Android/Chrome fully support background-clip CSS property? Works fine in FF/Chrome on PC and MacAndroid/Chrome 是否完全支持 background-clip CSS 属性？在 PC 和 Mac 上的 FF/Chrome 中运行良好

【发布时间】：2020-08-27 17:44:56

【问题描述】：

我有一些文本，我正在使用“背景剪辑”属性应用背景图像以显示为填充。这种效果在 Mac 和 PC 上的 Firefox 和 Chrome 中有效，但在使用 chrome 的 android 设备上有效，我唯一需要测试的是，文本是“那里”意味着我可以触摸屏幕并且它突出显示但效果不存在出现“隐形”。文本在画布上以 Z 为索引，在桌面浏览器中看起来也很好。关于为什么 android/chrome 渲染不一样的任何想法？

附：我不能只用笔把这一部分分开，所以请参阅附加代码：

html

<div id="light-intro-wrapper">
<div id="light-intro">THIS IS<br>
  TEXT <br>
  <a class="down_block go" href="#content_a"><i class="fa fa-arrow-down"></i></a> </div>
<div id="3d-graph">
  <div style="position: relative;">
    <div>
      <div style="position: relative;">
        <div class="scene-nav-info" style="display: none;">Left-click: rotate, Mouse-wheel/middle-click: zoom, Right-click: pan</div>
        <div class="scene-tooltip">&nbsp;</div>
        <canvas  style="width: 1920px; height: 958px;" ></canvas>
      </div>
    </div>
    <div class="graph-info-msg">&nbsp;</div>
  </div>
</div>
<div id="content_a">&nbsp;</div>

CSS

canvas#canvas 
    display: block;
    letter-spacing: 0.2rem;
    margin: 0;
    padding: 0;
    color: #FFF;
    overflow: hidden;
    z-index: 0;
    position: absolute;
    width: 100%;


#light-intro 
    height: 200px;
    background: url("image.jpg");
    z-index: 9999;
    position: absolute;  
    width: 50%;
    display: table-cell;
    vertical-align: top;
    font-family: 'Nunito Sans',sans-serif;
    font-weight: 900;
    font-size: 7vh;
    line-height: 1em;
    margin: 0 auto;
    margin-top: 400px;
    top: 0px;
    color: transparent;
    right: 25%;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;



.down_block 
    border-radius: 50%;
    display: flex;
    height: 55px;
    left: 50%;
    margin-left: -17px;
    opacity: 1;
    position: absolute;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease 0s;
    width: 55px;
    z-index: 999;
    background: #FFF url("http://chrismccormick.com/wp-content/uploads/cellular.jpg");
    font-size: 3vw;
    margin-top: 20px;
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    background-size: cover;


.go 
    color: transparent;

编辑：清理标记/CSS

合十礼 -mk

【问题讨论】：

如果没有人想要给出明确的答案或提供解决方案，我将对原始问题选择“否”并将其标记为已回答。据我所知，代码是有序的，并且在减去“背景剪辑”属性的情况下跨平台运行良好。

【参考方案1】：

显然不支持。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

...我是作者，我既批判又清晰。这就是答案。

我遇到了同样的障碍！我想我们应该远离像这样实施不善的属性。我要去寻找一种不同的方法来获得效果。