文本的彩虹色

2024-05-16

.rainbowtext{ background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); 
color:transparent;
-webkit-background-clip: text;
background-clip: text;
font-weight: bold; }
<p class="rainbowtext">Hello! This should have rainbow coloring.</p>

我想让文字具有彩虹色。此代码工作正常,但仅适用于 Safari/Chrome,在 Firefox 中文本是透明的。我尝试过乱搞它但没有成功。有什么帮助吗:P?


Edit2

找到了解决方案Yoksel http://codepen.io/yoksel's codepen http://codepen.io/collection/lEHDb/使用 SVG 绘制带有彩虹渐变的 200x200 图案,然后应用于文本作为填充。

<div class="wrapper">
  <svg  width="350" height="25">
    <defs>
        <linearGradient id="rainbowGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
          <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
          <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
          <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
          <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
          <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
          <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
          <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
          <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
          <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
          <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
        </linearGradient>
      
        <pattern id="rainbow" 
                 patternUnits="userSpaceOnUse"
                 width="200" height="200" 
                 viewbox="0 0 200 200">
          <rect width="200" height="200"
                  fill="url(#rainbowGradient)"/>
        </pattern>
      </defs>
  
    <text x="0" y="50%" style="fill: url(#rainbow);">Hello! This has have rainbow coloring.</text>
  </svg>
</div>

Edit

讽刺的是,我在这里使用 ff ,所以我误解了你的问题。

您使用的这种效果是webkit独有的,firefox上没有对应的效果-webkit-background-clip: text;

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

文本的彩虹色 的相关文章

随机推荐

  • IE7 和 TinyMCE 与 Plone

    在 Windows 服务器上开箱即用的 Plone 4 1 4 4113 中 IE7 上会出现一些客户端问题 我知道 访问主站点 没问题 登录 IE 引发运行时错误 第 505 行 扩展标识符 字符串或数字 添加内容 IE 引发运行时错误
  • 如何从 Gforth 网站读取原始代码?

    我想要一个像这样的词 read site add n buff max n flag 其中 add n 是站点名称缓冲区 buff max 是应读取 ASCII 文本的缓冲区 n 是读取的字节数 flag如果操作成功则为 true 这在 L
  • 覆盖 logback 配置

    有什么方法可以覆盖 logback 配置吗 我知道我们在名为的文件中定义了 logback 配置logback xml 通常存储在路径中src main resources 并且我知道通过使用
  • 使类只能从特定类实例化

    假设我有 3 节课class1 class2 and class3 我怎样才能拥有它class1只能通过实例化class2 class1 object new class1 但不是 class3 或任何其他类 我认为它应该与修饰符一起使用
  • Kotlin 和惯用的书写方式,基于可变值“如果不为空,则...”

    假设我们有这样的代码 class QuickExample fun function argument SomeOtherClass if argument mutableProperty null doSomething argument
  • 如何从 os x 终端启动屏幕保护程序(并锁定屏幕)?

    有没有办法从 bash 脚本启动屏幕保护程序 并锁定屏幕 你试过这个吗 System Library Frameworks ScreenSaver framework Resources ScreenSaverEngine app Cont
  • 缓存一致性是否始终可以防止读取过时的值?失效队列允许吗?

    在 MESI 协议中 仅当将缓存行保持在独占 修改状态时才写入缓存行 要获取独占状态 您可以向持有同一高速缓存行的所有核心发送无效请求 但是是否存在一种微架构 其中某些内核会在实际使缓存线无效之前做出确认响应 如果确实如此 那不是违反了缓存
  • 如何让 Win32 使用 Windows XP 样式字体

    我正在使用纯 C 和 WinAPI 编写 Win32 应用程序 不允许使用 MFC 或 C 为了让控件使用适当的样式进行绘制 我使用了清单 如相应的 MSDN 文章中所述 一切都很好 当我更改系统样式时 我的应用程序也会更改样式 但使用的字
  • 有没有办法在 jqgrid treeGrid url 请求中传回附加数据?

    i am 使用 jqgrid 树视图 http www trirand com jqgridwiki doku php id wiki 3atreegrid我正在传回 json 响应 效果很好 我想将一些有关请求的附加信息传递回 GUI 并
  • Flutter如何在BottomNavigationBar中添加边距或填充

    我正在尝试制作底部导航栏 但在屏幕上左右填充 现在 我用容器包裹 BottomNavigationBar 并在其中添加填充 问题是 BottomNavigationBar 默认背景仍然包裹所有图层 所以我们可以删除那里的背景颜色吗 Goal
  • 如何让Symfony2直接加载CSS、JS文件而不是通过PHP?

    老问题 请参阅下面的更新版本 我的开发环境不是最快的 每个 PHP 请求大约需要 500 毫秒 它开始成为 Symfony2 资源文件的问题 因为每个资源文件都是通过 Symfony 的内部控制器请求的 http localhost myp
  • Mandrill 验证错误

    很高兴能在 StackOverflow 上提出我的第一个问题 多年来我一直依靠它自学了很多东西 我的问题是这样的 尝试通过 Mandrill 的 API 发送邮件时出现以下错误 status error code 1 name Valida
  • 如何在url请求中发送数组

    我的要求如下 我想给出演员姓名 开始日期 结束日期并获取他在该时期出演的所有电影 因此 我的服务请求是这样的 http localhost 8080 MovieDB GetJson name Actor startDate 20120101
  • WCF 服务中的“即发即忘”

    我在 Azure 上有很多 WCF REST 服务 在某些 WCF 服务中 我向外部服务调用 Http 请求 例如发送电子邮件 短信 对非关键第三方服务的 http 请求 我不希望这阻碍我对客户电话的响应 需要一些关于在这种情况下使用的模式
  • 如何作为应用程序发布到页面?

    所以 我有一个应用程序 Facebook 应用程序实体 并且我有一个页面 我想使用应用程序通过java代码 通过restfb或任何其他建议 发布到页面 看起来我错过了页面授予应用程序发布权限的阶段 不知道该怎么做 谢谢你们 乌里 您只能 作
  • 从 Firebase Crashlytics 控制台导出数据?

    我正在试用 Firebase Crashlytics 日志数据的控制台显示很混乱 见下图 有没有办法导出完整的崩溃报告 我在 Firebase 控制台中看不到 我从未使用过原始的 Crashlytics 但我看到它有一个导出工具 Fireb
  • 将 firebase auth 与 google app engine 云端点集成

    有人可以指定 使用一些示例代码 如何验证谷歌云端点中的 firebase 令牌吗 最近提出的问题根本没有澄清 如何将 Firebase 身份验证与 Google 应用引擎端点集成 https stackoverflow com questi
  • 使用 Apache POI Excel 写入特定单元格位置

    如果我有一个未排序的参数 x y z 列表 是否有一种简单的方法将它们写入使用 POI 创建的 Excel 文档中的特定单元格 就好像前两个参数是 X 和Y 坐标 例如 我有如下行 10 4 100 是否可以在第 10 行第 4 列的单元格
  • 从 Spring MVC XML 文件转移到 javaconfig。我真的对我的数据库 XML 文件感到困惑

    我从 Spring MVC XML 文件转移到 javaconfig 我真的对我的数据库 XML 文件感到困惑 我不知道如何让 Hibernate4 工作以及我的 JBoss JNDI 数据源工作 有人可以告诉我如何使 javaconfig
  • 文本的彩虹色

    rainbowtext background image webkit gradient linear left top right top color stop 0 f22 color stop 0 15 f2f color stop 0