微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Android / Chrome是否完全支持background-clip CSS属性?在PC和Mac上的FF / Chrome中正常运行

如何解决Android / Chrome是否完全支持background-clip CSS属性?在PC和Mac上的FF / Chrome中正常运行

我有一些文本,我正在使用背景图像使用“ background-clip”属性将其显示为填充。此效果在Mac和PC上的Firefox和Chrome中有效,但在使用chrome的android设备上,只有我要测试的内容文字为“有”,表示我可以触摸屏幕,并且高亮显示,但效果并不在那里出现“不可见”。文本在画布上进行了Z索引,并且在桌面浏览器中看起来也不错。为什么android / chrome不能渲染相同的任何想法?

P.S。我不能只用笔把这部分分开,所以请看附件代码

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 height="958" style="width: 1920px; height: 958px;" width="1920"></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

Namaste -mk

解决方法

显然不支持。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。