H5 文字渐变换行失效

最新推荐文章于 2024-08-19 10:30:38 发布

CamilleZJ

最新推荐文章于 2024-08-19 10:30:38 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： H5 文字渐变换行失效文字渐变失效

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/CamilleZJ/article/details/84570171

前端专栏收录该内容

123 篇文章

订阅专栏

在制作H5活动页面时，使用CSS3线性渐变实现文字渐变效果，发现手机端多行文字渐变失效。通过调整样式，将渐变效果应用于父元素，实现了多行文字渐变，但每行渐变为独立渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个H5活动，活动简介标题用到了CSS3 的线性渐变，在本地测试电脑上看没有问题但是在手机上文字过多导致换行时发现渐变鲜果失效了并且第一行虽然不渐变但是是渐变开始的颜色，第二行确实透明色，如下截图

PC端效果：

手机端效果如下，第二行是文字实际是transparent 下面是因为文字添加了阴影。

代码如下：

.title{
    font-family: PingFang-SC-Heavy;
    font-size: .533rem;
    line-height: 1.5;
    letter-spacing: .08rem;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    background: -o-linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    background: -moz-linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    background: linear-gradient(to right, #d19319, rgba(242, 213, 156, 0.8));
    -webkit-background-clip: text;
}

<div class="title-con">
    <i class="title-icon title-l"></i>
    <span class="title">来战！噢噢来战！噢噢来战！噢噢来战！</span>
    <i class="title-icon title-r"></i>
</div>

目前暂不知什么原因（哪位前端大神知道望告知）

最终解决，将渐变效果放到了父元素title-con上，就实现了文字多行渐变，但是每一行渐变都是独立的，即每一行都是从开始色渐变，并不是连续渐变，效果如下：