css 同时实现渐变色和文字阴影
今天在工作中根据UI实现标题文字的样式,却发现拷贝的相关css却怎么都实现不了。
ui图如下:
实现渐变的方法
实现渐变的方法其实很简单,主要是用背景的渐变来实现的,先将字体的颜色变成透明,然后设置背景为渐变色就可以了
渐变效果如下:
然后叠加字体的阴影,直接添加text-shadow
属性,可是效果却不是我们想要的,发现阴影覆盖在了字体之上
解决办法
利用::before
伪类的帮助,将字体的阴影加在伪类之上。
问题1: ts
报错: 可是伪类的content
需要设置文字并且不能写死怎么办呢?解决办法就是在<div>
中添加属性,可是随便添加的data
属性,ts
会直接报错,后来我查询了基本的html
标签之后才知道,默认有一个title
属性是符合要求的,于是就将title
属性传递文字信息,完美解决了我的问题。
问题2:层级问题不显示,我发现就算伪类设置了z-index: -1;
并且为绝对定位
了,但是效果还是没有显示,我继续往上找父标签,原来需要将父标签div
上样式的z-index
设置为0
才可以,至此,终于实现了我想要的效果。
完整代码
const title = "渐变色和文字阴影"
<div className={styles.bg}>
<div className={styles.title} title={title}>
{title}
</div>
</div>
.bg {
// 大的蓝色背景图
url('https://pic.616pic.com/bg_w1180/00/03/63/c46SCIz9QV.jpg');
background-size: 100% 100%;
width: 498px;
height: 57px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
// 设置父标签的 z-index 为 0 才能使阴影生效
z-index: 0;
.title {
// 文字渐变效果
background: linear-gradient(177deg, #FFF 40.11%, #6CA7ED 78.94%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
// 字体设置
font-family: PangMenZhengDao-3;
font-size: 24px;
font-style: normal;
font-weight: 400;
}
// 利用伪类实现阴影效果
.title::before {
// attr(title) 获取文字信息
content:attr(title);
// 必须设置 绝对定位 和 z-index: -1 才行
position: absolute;
z-index: -1;
// 阴影
text-shadow: 0px 4px 3px rgba(4, 50, 140, 0.81), 0px 0px 13px rgba(89, 105, 252, 0.60);
}
}
转载自:https://juejin.cn/post/7300174977169358882