如何使用 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 更改图标图像的颜色? [复制] 的相关文章

  • 使用 jquery 远程图像属性

    目前我正在尝试获取远程图像宽度 高度 我正在开发一个链接共享模块 就像当你在 Facebook 上粘贴链接时 你可以看到标题 描述和图像 所以我尝试使用 php getimagesize 来获取图像宽度 高度 但速度非常慢 所以我正在考虑使
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • 使用 jQuery 从 CKEditor 的 iframe 中获取内容

    我有一个自定义编写的 CMS 它使用CKEditor http ckeditor com FCKEditor v3 用于编辑内容 我也在使用jQuery 验证 http bassistance de jquery plugins jquer
  • 谷歌地图初始化无法使用选项卡

    我正在尝试在选项卡单击事件上初始化 Google 地图 因为目前我得到的地图如下 My Code function render map This function will render a Google Map onto the sel
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 按搜索值过滤元素 - 多个单词

    我有一个由 DIV 和 INPUT 搜索框组成的列表
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 使用 Jquery 清除 5 个空 TD

    我有一个正在填充的动态表 我知道我不应该这样做 但是你会如何连续找到 5 个空 TD 并隐藏它们呢 因此 如果行包含 5 个空 TD 则不显示 TD 我想删除每个实例 td td td td td td td td td td 在 DOM
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var

随机推荐

  • 给定 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 来填充图像不是一个选项 因为我要在我的