css 同时实现渐变色和文字阴影

今天在工作中根据UI实现标题文字的样式,却发现拷贝的相关css却怎么都实现不了。

ui图如下:

实现渐变的方法

实现渐变的方法其实很简单,主要是用背景的渐变来实现的,先将字体的颜色变成透明,然后设置背景为渐变色就可以了

渐变效果如下:

然后叠加字体的阴影,直接添加text-shadow属性,可是效果却不是我们想要的,发现阴影覆盖在了字体之上

解决办法

利用::before伪类的帮助,将字体的阴影加在伪类之上。

问题1: ts报错: 可是伪类的content需要设置文字切不能写死怎么办呢?解决办法就是在<div>中添加属性,可是随便添加的data属性,ts会直接报错,后来我查询了基本的html标签之后才知道,默认有一个title属性是符合要求的,于是就将title属性传递文字信息,完美解决了我的问题。

问题2:层级问题不显示,我发现就算伪类设置了z-index: -1;并且为绝对定位了,但是效果还是没有显示,我继续往上找父类,原来需要将背景图上的divz-index设置为0才可以,至此,终于实现了我想要的效果。如果没有背景图应该就不需要设置了。

完整代码

html 复制代码
   const title = "渐变色和文字阴影"
  <div className={styles.bg}>
      <div className={styles.title} title={title}>
        {title}
      </div>
    </div>
css 复制代码
.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;
  

  .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 {
    content:attr(title);
    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);
  }
}
相关推荐
晓得迷路了1 小时前
栗子前端技术周刊第 97 期 - Viteland:8 月回顾、Redux Toolkit 2.9、Nuxt 4.1...
前端·javascript·nuxt.js
前端双越老师1 小时前
前端开发 AI Agent 智能体,需要掌握哪些知识?
前端·node.js·agent
EndingCoder1 小时前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
学前端搞口饭吃1 小时前
React props的使用
前端·javascript·react.js
灵感__idea2 小时前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛2 小时前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒2 小时前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As33100102 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱2 小时前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖2 小时前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js