首页 > 其他分享 >text-shadow和文字颜色渐变冲突问题

text-shadow和文字颜色渐变冲突问题

时间:2023-04-28 17:33:54浏览次数:32  
标签:文字 text 渐变 background shadow font

设计给的设计图同时有文字颜色渐变,文字阴影,如下图

实际实现效果是:

 

text-shadow覆盖了文字颜色渐变的样式
解决方案:
<div class="platformtext" text="能源云推广展示平台">能源云推广展示平台</div>

.platformtext {
            color: #fff;
            font-weight: 400;
            font-size: 59px;
            font-family: YouSheBiaoTiHei;
            letter-spacing: 17px;
            text-shadow: 0px 3px 0px #141b2d;
            position: absolute;
            top: 25px;
            left: 3465px;
            z-index: 10;
        }
        .platformtext::before {
            content: attr(text);
            font-weight: 400;
            font-size: 59px;
            font-family: YouSheBiaoTiHei;
            letter-spacing: 17px;
            position: absolute;
            z-index: 10;
            background: linear-gradient(180deg, #ff9c0e 0%, #fff 0%, #bde4ff 100%);
            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;

            // 去除继承父级样式
            text-shadow: none;
        }

原理:在原来的文字上,通过绝对定位覆盖多一层,底层用text-shadow ,上层文字相同,设置渐变样式。

标签:文字,text,渐变,background,shadow,font
From: https://www.cnblogs.com/zigood/p/17362760.html

相关文章

  • 02 Real-Time Shadows
    1.ShadowMapping在shadowmap中,场景被离散化了。在camera中的像素对应的点跟shadow中对应深度可能会有较小偏差,则为阴影。当入射越是平行表面,shadowmap中的像素范围越大,越严重。为此,设置一个shadowmap深度的冗余的阈值偏置。此外,这个bias可以根据角度调整。但是bias过大会......
  • unity 把本地图片批量添加到 物体的脚本上 Texture 类型
    privatevoidAwake(){stringfilePath=System.Environment.CurrentDirectory+"/专利/";if(Directory.Exists(filePath)){//判断这个路径是否存在DirectoryInfodirection=newDirectoryInfo(filePath);floders=directi......
  • 【解决】axios 下载文件 Failed to read the 'responseText' property from 'XMLHttp
    主要解决以下两个问题问题一:idm一些网站不允许请求同一文件两次故障原因:IDM在发神经因为它检测到浏览器集成插件未安装,所以诱导你安装。实际上,装了插件问题也会出现。改参数都没用。1.很可能是你点击网页的下载链接有问题(换个网页下载试试,就不提示了),Edge浏览器一直会欺......
  • ApplicationContextAware
    在某些特殊的情况下,Bean需要实现某个功能,但该功能必须借助于Spring容器才能实现,此时就必须让该Bean先获取Spring容器,然后借助于Spring容器实现该功能。为了让Bean获取它所在的Spring容器,可以让该Bean实现ApplicationContextAware接口。ApplicationContextAware通过它Spring容器......
  • js javascript 鼠标触碰select下拉列表渐变出div层,鼠标离开渐变缩回
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-......
  • java 后台给前台传值,html:select,html:text等加载页面显示默认值的方法
    后台写request.setAttribute("dateCreated","黑色头发");前台接收:html:text<html:textproperty="dateCreated"value="${dateCreated}"/>html:select<html:selectproperty="accountsUser"va......
  • css渐变实现进度条动画
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • MFC-CListCtrl-SetExtendedStyle设置扩展风格
       mylist.SetExtendedStyle(LVS_SHOWSELALWAYS|LVS_EX_CHECKBOXES|LVS_EX_FULLROWSELECT|LVS_EX_GRIDLINES);//设置扩展风格风格看:https://www.cnblogs.com/liming19680104/p/17358671.html   ......
  • TextInput。它的常用方法及其参数说明
    get():获取输入框的文本内容。返回值为字符串类型。my_text_input=TextInput()text=my_text_input.get()print(text)set(text):设置输入框的文本内容。text参数为要设置的文本内容my_text_input=TextInput()my_text_input.set('Hello,Kivy!')focus():将输入框设为焦......
  • IntelliJ Idea设置text file encoding UTF-8;换行符为 Unix 格式
    设置textfileencodingUTF-8Transparentnative-to-asciiconversion这个功能会将我们输入的所有字符转换成Unicode序列码保存,避免properties的乱码问题。CreateUTF-8files选择withNOBOMUTF-8BOM又叫UTF-8签名。BOM,byteordermark。UTF-8的BOM在文件头部,用来标识......