主页 / 问题 / 623316
Accepted
VaskM
Asked:2020-02-04 21:01:17 +0000 UTC2020-02-04 21:01:17 +0000 UTC

如何使用CSS更改PNG图像的颜色？

  • 772

有 png 图标，例如来自 VK 的蓝色图标。如何使用CSS将其更改为白色？

PS：我在谷歌上搜索过filter: hue-rotate()，但是对于白色，这不是一个选项。

<img src="https://vk.com/images/icons/head_icons.png">

css

3 个回答

  1. Best Answer

    你可以使用 css 过滤器：

    • 灰度将颜色转换为黑白
    • 棕褐色产生棕褐色效果
    • saturate设置饱和度
    • hue-rotate根据给定的角度改变图像的颜色。旋转角度决定了给定颜色在色轮中从红色变为紫色的程度。该值以度为单位（0 度 - 360 度）
    • invert反转颜色
    • opacity设置元素的透明度
    • brightness改变图像的亮度
    • 对比度改变图像对比度
    • blur创建模糊效果
    • drop-shadow创建阴影

    注意：过滤器可以相互组合

    .bg{
  background-color: #8fbd35;
  padding: 20px;
  }

.fl{
  filter: invert(1);
}
    <div class="bg">
  <img src="https://vk.com/images/icons/head_icons.png">
</div>
<div class="bg">
  <img class="fl" src="https://vk.com/images/icons/head_icons.png">
</div>

    阅读材料：habrahabr

    演示： 演示

    • 15

  2. 如果背景是透明的，那么你可以拧开图片亮度。例如：

    filter: brightness(10);

    但是仍然存在一些不确定性，扭曲到什么程度，以便除了白色之外的所有阴影肯定会消失。但它brightness(0)会给出一个全黑的画面，很容易反转：

    filter: brightness(0) invert(1);

    http://codepen.io/glebkema/pen/dNKGXZ

    body { background: #ccc; }
img { display: block; }
    <img alt="" src="//i.stack.imgur.com/R8YjS.png">
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(5);">
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(10);">
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(0) invert(1);">

    • 11

  3. 在 CSS 中更改颜色的示例：

    @keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(-360deg);
    }
}

.hue {
    animation: hue 10s infinite linear;
 }
    <img class="hue" src="https://vk.com/images/icons/head_icons.png">

    • 4

相关问题