一.初遇
今天项目需求需要用到 字体 线性渐变 百度一番找到如下方案
.text-gradient {
background-image: linear-gradient(to top, #36EFFF, #25D5A5);
-webkit-background-clip: text;
color: transparent;
font-size: 30px;
}
<span class="text-gradient">123</span>
这个效果呢也确实可以实现,看下demo效果:
可以看到确实是线性渐变。
那么我们把他移植到项目中
<el-aside style="width: 60%;padding: 0 20px;">
<div class="time">
<div>
<span class="mytext-gradient">{{ date.year }} {{ date.month }} {{ date.date }}
</span>
<span class="mytext-gradient">{{ date.week }}</span>
<span class="mytext-gradient">{{ date.h }}:{{ date.m }}:{{ date.s }}</span>
</div>
</div>
</el-aside>
.mytext-gradient {
display: inline-block;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
font-weight: 600;
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to top, red, #25D5A5);
}
二. 意外
然而意料之中的效果并没有出现
这是什么鬼!!!!
三. 发现蛛丝马迹
经过和demo对比代码,初步发现是 “ -webkit-background-clip: text;” 这句代码。
对比demo 发现 项目中少了这句代码,可是为什么会少呢?我明明在项目中写了这句代码啊!
经过百度发现这个属性不能被嵌套,就是说它外部不能有元素,可以看这个 css – Chrome 69使用’transform’,’ – webkit-background-clip:text’和’color:transparent’不起作用 - 编程之家 不只是69版本有这个问题,最新版也有。在edge中也是,但是在firefox就可以正常显示渐变。那怎么解决呢?
四. 解决
首先在项目中发现是少了这句代码,那我能不能给他加上呢?
看一下代码
let x = document.querySelectorAll(".mytext-gradient")
for(let o of x) {
o.style["-webkit-background-clip"] = 'text'
}
再看一下页面
欧克,解决!
00后初入前端小白,写的不好请各路大神指教!