如何解决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"> </div>
<canvas height="958" style="width: 1920px; height: 958px;" width="1920"></canvas>
</div>
</div>
<div class="graph-info-msg"> </div>
</div>
</div>
<div id="content_a"> </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 举报,一经查实,本站将立刻删除。