css 过滤器使元素变成一种颜色

2024-01-28

以下 CSS 过滤器:

filter: brightness(0) invert(1);

使元素全白(source https://stackoverflow.com/questions/24224112/css-filter-make-color-image-with-transparency-white)。很整洁,但是有没有办法让它们变成另一种颜色,例如蓝色的?这适用于有透明背景的情况,例如一个图标。我想让图标成为任意颜色。


The hue-rotate()然而,滤镜会影响所有颜色,因此它不会将全彩图像变成单色图像。相反,它会移动色轮周围的所有颜色。

但是,您可以通过转换为灰度、添加棕褐色然后旋转色调来破解解决方案这使得图像看起来像单一色调的绿色阴影:

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

如果您关心处理矢量工作,例如您将经常使用的图标,您可能会考虑将其转换为 SVG,然后您可以使用纯 css 为其着色。https://icomoon.io https://icomoon.io可以帮忙解决这个问题。

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

css 过滤器使元素变成一种颜色 的相关文章

  • Google 自定义搜索引擎 (CSE) 按钮图像丢失/未显示

    After implementing a Google Custom Search Engine CSE and adding their JavaScript code to the Master Page for my site I s
  • 覆盖按钮的文本颜色不起作用

    我使用每个按钮上的buttonBarStyle 和布局上的buttonBarButtonStyle 为按钮栏创建了一个自定义主题 它工作正常 但我想更改按钮的文本颜色 但它仍然采用默认颜色 android color primary tex
  • 在哪里指定图像尺寸以实现最快渲染:在 HTML 中还是在 CSS 中?

    我了解到 明确指定图像尺寸是最佳实践 然后 浏览器可以在仍然下载图像本身的同时布局页面 从而缩短 感知的 页面渲染时间 这是真的 如果是这样 在 HTML 或 CSS 中指定尺寸是否有区别 HTML img src width 200 he
  • IE6 CSS 显示:表格修复?

    我正在开发一个网络应用程序 不幸的是它必须与有史以来最糟糕的软件一起工作 是的 即 ie6 我真的很喜欢CSSdisplay table and display table cell属性 但当然它在 ie 中不起作用 有没有人找到解决这个问
  • 如何使用固定位置 div/ 的浮动、清除和溢出元素并排对齐两个 div/

    所以我一直在尝试将两个 div 并排对齐而不重叠 我有一个 div 将被固定为侧边栏 而右侧的 div 将被固定为内容 希望有人可以帮助我 body background color 444 margin top 0 margin bott
  • 使用 jQuery Mobile 和响应式布局/CSS 媒体查询是否多余?

    我正在退房http mediaqueri es http mediaqueri es 今天发现这些网站非常适合移动设备 所以我想知道将 jQuery Mobile 和响应 自适应布局与媒体查询一起使用是否是多余的 因为仅使用媒体查询似乎是一
  • 一个文本区域中的文本应复制到另一个文本区域,并且应使用 JavaScript 单击按钮清除原始文本区域

    我已经完成了以下代码 它显示两个文本区域 其中一个文本区域中的文本通过使用 javascript 单击按钮复制到另一个文本区域
  • R Shiny - 修复了 Shiny 仪表板中的侧边栏和主标题

    我有一个简化的闪亮仪表板 请参阅下面的代码 我想修复侧边栏和主标题 因此 在其他帖子的帮助下 我编写了一个 CSS 文件来解决该问题 sidebar color FFF position fixed width 220px white sp
  • 为什么这个 CSS nowrap 不起作用?

    我试图阻止 bar top container div 包裹它的内容 无论页面有多宽 即两个选择应该始终出现在同一行 但是当页面宽度太小而无法容纳它们时 这不起作用一方面 我该如何解决这个问题 Styles bar top containe
  • 显示带有 jQ​​uery-ui 自动完成功能的微调器

    我一直在到处搜索 但没有看到有人这样做 是否有可能拥有某种带有 jQ uery UI 自动完成功能的旋转器 加载器 1 8 获取数据时 我的解决方案是使用 ui autocomplete loading CSS 类 该类在 ajax GET
  • 底部带有三角形的蒙版图像

    我正在尝试找出如何最好地掩盖具有像这样的角度形状的 div 如果在这种情况下顶部 div 将是背景图像 并且两个 div 都是 100 宽度 我看过很多关于如何用圆形遮罩图像的教程 但没有关于如何遮罩红色区域等 div 边框的教程 我知道一
  • 绝对元素后面元素上的文本选择

    我有一个覆盖元素 它隐藏了其他包含文本的 div 覆盖元素是绝对定位的 我希望用户能够选择这些 div 后面的文本 我的解决方案是隐藏用户事件 mouseDown 上的覆盖层 显示 无 并在 mouseUp 事件发生时再次显示它 这样 一旦
  • 修复了当 CSS 过滤器应用于 Microsoft Edge 中的同一元素时不起作用的位置

    我正在 Edge 20 10240 16384 0 上测试这个 我有一个位置固定的元素 并且应用了 CSS 过滤器 这在除 Microsoft Edge 之外的所有浏览器中都非常有效 其中元素的位置不保持固定 此问题与 CSS3 过滤器直接
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • 如何使表格单元格的最小宽度为 3 位数字?

    如何使表格中的每个单元格的最小宽度为 3 位数字且不会更大 现在我正在硬编码min width 但我不喜欢硬编码一个值 因为我将来可能想更改字体 如果需要Javascript也没关系 table border 1 tr td 1 td td
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可
  • 具有 MVC4 风格捆绑的 Intellisense

    到目前为止我找不到问题或解决这个问题 我确信我错过了一些简单的事情 我有一个带有一堆缩小的 CSS 的样式包 并且我正在用里面的类来装饰 HTML 元素 一切都运转良好 然而 Intellisense 和 ReSharper 都因为 CSS
  • 我可以使用 :hover 触发 CSS3 动画(或过渡),即使鼠标不再悬停,该动画也会继续运行

    我正在创建一个链接列表 其中一个链接容器在悬停时会展开 包含详细信息 图像和说明 我用 CSS 过渡或动画来制作动画没有任何问题 问题是我希望它即使在鼠标移开后也能保持展开状态 我想在没有 JavaScript 的情况下做到这一点 那可能吗
  • jQuery - 动画CSS背景大小?

    我正在尝试对背景图像的大小进行动画处理 但它不起作用 从以下代码中知道为什么吗 this animate opacity 1 background size 70px 48px right 39 top 45 250 注意 所有其他属性都可

随机推荐

  • 为什么我的程序会改变布尔值? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我正在编写一个简单的程序 用于检查输入单词是否可以用输入字母拼写 无论我输入什么 布尔值总是会更改为 true 即使 if 语句中
  • Symfony:Doctrine 数据装置:如何处理大型 csv 文件?

    我正在尝试使用学说数据固定装置从 大 CSV 文件 3Mo 37000 行 7 列 插入 在 mySQL 数据库中 数据 过程非常缓慢 此时我无法成功 可能我还得再等一会儿 我想学说数据装置并不是为了管理如此大量的数据 也许解决方案应该是将
  • 有免费的 XNA UI 库吗?

    我正在考虑游戏中的游戏用户界面 查看 XNAML http msmvps com blogs valentin pages xnaml component aspx http msmvps com blogs valentin pages
  • 类成员的继承,与模板混合

    在下面的代码中 为什么T2给出这个错误 m t was not declared in this scope 而结核病还好吗 我如何在仍然使用模板的情况下访问 T2 中的 T1 成员 All good class TA public TA
  • 如何为某种特定类型而不是全局设置 Json.NET ContractSerializer?

    我想仅为 ASP NET Web API 应用程序中的某些类型设置合同序列化程序 我可以在 App Start FormatterConfig cs 中全局设置设置 如下所示 public static void RegisterGloba
  • 简洁和匿名类型

    是否可以在 Dapper 中使用匿名类型 我可以看到如何使用动态即 connection Query
  • Java – 高效、数据库感知的实例级授权?

    在 JPA 应用程序中 我有一个场景 其中该应用程序是 列出给定用户有权提款的所有帐户 我有帐户实体和一个多对多表 其中列出了每个用户对每个帐户拥有的授权 为了实现上述场景 应用程序当前只是内部联接两个表 这非常快 现在 我计划添加一个显式
  • 从 SQL SERVER 中的 CTE 删除行

    我有一个 CTE 它是表上的选择语句 现在 如果我从 CTE 中删除 1 行 它会从我的基表中删除该行吗 如果我有一个临时表而不是 CTE 情况也是一样吗 检查DELETE语句文档 http msdn microsoft com en us
  • Azure 服务总线通知中心是否可以与 websockets 和 javascript 配合使用?

    我对使用 Azure 服务总线通知中心感兴趣 然而 我的第一个 客户端 将是使用 Knockout 与 ASP NET MVC 站点进行基于 Websocket 的连接 目前 我正在尝试使用 SignalR 向客户端推送通知 然而 如果我可
  • 从命令行运行 android 单元测试?

    我正在尝试按照以下方式在 android 平台上运行单元测试tutorial http developer android com guide topics testing testing android html 举例来说 我想为电子邮件
  • Symfony2 中 $em->clear() 出现未定义索引错误

    我编写了一个 Symfony 命令来从 API 导入一些数据 它可以工作 但问题是当我在数据库中插入一个大的 JSON 时 我的 PHP 内存使用量会增加 每次导入活动后 我的工作单位都会增加 2 我已经取消设置了所有使用过的对象 并且当你
  • 如何通过代码有选择地禁用浏览器文本输入中的自动填充?

    是否可以使用代码有选择地禁用文本字段中的自动填充功能 我正在 ASP Net AJAX 中开发自定义代码以在数据库中搜索建议 并且我想防止当用户开始在文本框中键入内容时出现浏览器建议 我正在寻找一种适用于最现代的浏览器 IE 7 和 8 F
  • Angular UI Router根命名视图模板从子视图更改

    安装程序使用 Angular v1 5 8 和 ui router v0 3 1 我的根视图有几个命名部分 为了简洁起见 我删除了其中的一些部分 看起来像这样 section div div section section div div
  • 上的 SlideToggle() 会导致“跳转”

    使用 jQuery 时slideToggle 函数显示 隐藏表中新行上的数据会导致其卡顿 然而 当使用slideToggle 显示 隐藏 div 它工作得非常顺利 谁能告诉我为什么会发生这种情况 小提琴示例 http jsfiddle ne
  • .net 的 S/MIME 库?

    我需要使用 C 创建 S MIME 消息 如 RFC 2633 S MIME 版本 3 消息规范 和 RFC 3335 中指定 我能找到的唯一 S MIME 库是一个商业库 http www example code com csharp
  • 如何使用或不使用尾部斜杠进行 301 重定向?

    我想重定向site com login OR site com login to site com wp login php 这是我到目前为止所拥有的 RewriteRule login wp login php R 301 L 但它不会重
  • 根据列值和其他列更新 Pandas 单元格

    我希望根据一列中的值更新许多列 这对于循环来说很容易 但当有很多列和很多行时 对于我的应用程序来说花费的时间太长 获得每个字母所需的计数的最优雅的方法是什么 期望的输出 Things count A count B count C coun
  • AdMob 奖励视频广告无法在 Android 中加载 Fragment 内部

    Admob 奖励视频广告无法加载片段 我认为这两行有问题 mAd MobileAds getRewardedVideoAdInstance getActivity mAd setRewardedVideoAdListener this 请检
  • PHP preg_replace:删除字符串开头和结尾的标点符号

    我可以在 PHP 中使用什么正则表达式来删除字符串开头和结尾的所有标点符号 我不会使用正则表达式 可能是这样的 str trim str 其中第二个参数是您定义的标点 假设你真正的意思是 was to 去掉字母 数字等以外的内容 我会和 一
  • css 过滤器使元素变成一种颜色

    以下 CSS 过滤器 filter brightness 0 invert 1 使元素全白 source https stackoverflow com questions 24224112 css filter make color im