如何使用 CSS 更改图标图像的颜色? [复制]

2024-04-16

我想弄清楚如何更改半透明和半纯色图像的颜色。

我希望能够更改白色的颜色,这样我就可以添加悬停,并添加以动态方式更改 WordPress 中颜色的功能。使用 Photoshop 来填充图像不是一个选项,因为我要在我的 Wordpress 主题中构建一个换色器。

我使用了一个名为 JFlat.js 的 jQuery 脚本,因为它看起来正是我所需要的。虽然它似乎对我来说根本不起作用。按照确切的步骤,我猜测这是因为它使用旧版本的 jQuery。

有人可以为我提供一些帮助吗?

这是图像上的黑色版本,您看不到白色版本,因此我将发布此版本以便更好地了解我在说什么。


Use an SVG icon https://useiconic.com/icons/media-play-circle/,这个来自Iconic https://useiconic.com/. 图标瓜 http://iconmelon.com/#/page-1也不错

否则你可以使用字体图标 http://fontawesome.io/icon/play-circle-o,这个来自字体真棒 http://fontawesome.io/

如果必须的话,您可以使用CSS过滤器 https://developer.mozilla.org/en-US/docs/Web/CSS/filter但它是仅在较新的浏览器中支持 http://caniuse.com/#search=filter。最好的后备方案是使用 SVG 过滤器执行相同的操作,并使用数据 URL 来应用它。Demo http://jsfiddle.net/a7yV9/

-webkit-filter: invert(100%);

你也可以使用像agconti建议的精灵

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

如何使用 CSS 更改图标图像的颜色? [复制] 的相关文章

随机推荐

  • 给定 3D 空间中的一条线,如何找到从它到一点的角度?

    我在 3D 空间中有两组点 我想画一条穿过两组点的中心的线 然后找到从该线到每个点的角度 从那里开始 我将根据两个角度的接近程度来确定两组中的匹配点 我知道如何找到每组点的中心 只需将它们平均在一起 并且我知道如何将它们匹配 甚至考虑到它们
  • 跟踪大量电子邮件活动

    Litmus 上个月 2010 年 5 月 发布了电子邮件分析服务 看这里 http litmusapp com email analytics http litmusapp com email analytics 他们拥有非常酷的 读取率
  • 如何让 bash 日期脚本返回相对于非当前时间的一周中的某一天?

    使用 bash date 我可以让它返回相对于当前时间的星期几 date d last Sunday Returns date of the Sunday before today 我还可以让它返回相对于其他日期的一天 date d 02
  • PYODBC 不喜欢 %,“SQL 包含 2 个参数标记,但提供了 1 个参数。”

    因此 我目前正在将 Python 与 SQL 链接起来以提取客户信息 不幸的是 我遇到了一些关于 SQL 的错误 我尝试使用 LIKE 运算符和 通配符 但我不断收到错误 因为 Python 不喜欢 结果 它假装 s 之间的变量不存在 这就
  • bash:意外标记“(”附近出现语法错误

    我正在尝试安装一个软件 这个错误一次又一次地出现 我尝试了一些解决方案 这些解决方案建议了类似的错误 但对我不起作用 命令如下 sudo su c R e install packages shiny repos http cran rst
  • Recyclerview 未更新新数据

    嗨 大家好 我有一个片段RecyclerView在里面 那RecyclerView由 Firebase DatabaseReference 对象填充 并在该引用上添加了一个 ValueListener 如下所示 public View on
  • Scala 函数变体和重写

    我在理解重载时方法的差异时遇到了一些问题 虽然由于返回类型的协方差 这可以完美地工作 class Bla class Fasel extends Bla trait Test A def tester Bla new Bla class F
  • 错误:仅具有以下方案的 URL:使用 monorepo 中的 NX 生成的 NestJS 应用程序中的默认 ESM 加载程序支持文件和数据

    我有一个用 NX v16 生成的 Monorepo 我里面有正在运行的 React 应用程序 我使用来自 NX VS Code 插件的 nx 生成器命令生成了 NestJS 应用程序 但是当我启动 Nest 应用程序时nx run
  • Eclipse更新后插件消失了

    已使用更新 Eclipse PDTWindow gt Check for Updates特征 重启后所有第三方插件似乎都被关闭了 从 开始 clean命令行键没有帮助 Eclipse Installation Detals正确包含有关我所有
  • 从两个表中选择最大值、最小值

    我有两张桌子 不同之处在于 归档是一个表 另一个保存当前记录 这些是记录公司销售额的表格 在这两个字段中 我们都有其他字段 id 名称 销售价格 我需要从两个表中选择给定名称的最高价格和最低价格 我尝试处理查询 select name ma
  • 寻找贝宝付款教程[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个教程 它将向我展示如何接受贝宝付款 因为我对文档不太了解 在教程中 我只需要了解如何在发起
  • 如何获取传递给 JNI 的枚举值

    我有一个 Java 应用程序和 JNI dll 我想知道如何获取作为参数传递给 JNI 的枚举 int 的值 这是枚举 Java public enum envelopeType NOT SPECIFIED 1 NONE 0 IMAGE 1
  • 如何在 IntelliJ 15 中导入现有的 Grails 3 (3.0.12) 项目

    IntelliJ 网站上有用于创建新 Grails 项目的文档 但导入项目比较粗略 我无法让它为我工作 如果我告诉 IntelliJ 导入一个新项目 并将其指向我的项目目录 它不会将其识别为 Grails 项目 项目导入后 我可以转到 项目
  • Docker mysql 主机没有特权

    我正在尝试配置一个nodejs 容器来连接到mysql 数据库 我的代码如下所示 var pool mysql createPool host mysql port 3306 user root password database gene
  • IE8 不渲染某些 HTML 名称实体

    某些 HTML 名称实体未在 IE8 中呈现 相反我可以看到未呈现的 HTML 实体 例如 scedil or inodot 我找到了一个使用 HTML 数字实体的解决方案 例如 351 代替 scedil 我想知道是否有人知道这个问题的原
  • 除了扩展名之外,.json、.txt、.html、.css 和 .js 文件之间有什么区别吗?

    动力是 我有一些 JSON 我已经将其保存为 txt 文件一段时间了 我想将它们全部重命名为 json 以更准确 我很确定它们都是 UTF 8 大多数可以通过 Ajax 发送的文件也是如此 无论如何 这个问题提出了一个更大的问题 除了扩展名
  • 使用 jQuery 传递 POST 数据时打开 URL

    是否可以使用 jQuery 更改页面 URL 同时将发布数据传递到新页面 如果您的意思是要更改current页面 URL 那么您可以添加新的
  • 在没有互联网的情况下使用 Javascript 获取 GPS 位置 [重复]

    这个问题在这里已经有答案了 您好 如果设备具有 GPS 硬件 我们可以在没有互联网连接的情况下使用 JavaScript 获取 GPS 位置吗 请注意谁将其标记为重复 我需要 JavaScript 在没有互联网连接的情况下工作 并使用 GP
  • 从 mysql 表获取行到 php 数组

    如何获取 mysql 表的每一行并将其放入 php 数组中 我需要一个多维数组吗 所有这一切的目的是稍后在谷歌地图上显示一些点 您需要从表中获取所需的所有数据 像这样的事情会起作用 SQLCommand SELECT someFieldNa
  • 如何使用 CSS 更改图标图像的颜色? [复制]

    这个问题在这里已经有答案了 我想弄清楚如何更改半透明和半纯色图像的颜色 我希望能够更改白色的颜色 这样我就可以添加悬停 并添加以动态方式更改 WordPress 中颜色的功能 使用 Photoshop 来填充图像不是一个选项 因为我要在我的