Home / Questions / 87567
Accepted
Juan Pinzón
Asked: 2020-07-18 12:41:23 +0800 CST 2020-07-18 12:41:23 +0800 CST

用css改变图像的颜色

  • 772

我正在使用jquery ui页面上的图标，但是我想知道您是否只能使用 更改图标的颜色css，即：要更改图标的颜色，jquery ui必须更改包含所有图标的图像，例如：

jQuery网络 jQuery 蓝色

所以为了避免这种情况，我想我可以将图标的颜色更改为绿色或任何需要的颜色。因为如果我改变图像，所有图标的颜色都会改变，我只需要改变其中的一些。

我读过它可以用于filter，css但我不知道如何按照我上面提到的方式更改颜色。

img { display: block; width: 50%; }

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
<img src="https://isstatic.aoverflow.com/fXKdt.png" alt="test">

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

css3

1 Answers

  1. Best Answer

    1.直接回答你的问题

    如果您对使用过滤器感兴趣，可以，尽管我推荐第二种方法（如下）。

    要使用滤镜更改颜色的色调，最好从纯色开始。例如，让我们使用 100% 红色作为原始图像。

    我们习惯于处理 RGB，但是对于过滤器，我们必须在HSL（色相、饱和度、亮度）中移动。例如：

    • 红色的：HSL( 0°, 100%, 50%)
    • 绿色的：HSL( 120°, 100%, 50%)

    对于 CSSfilter和properties backdrop-filter，分别使用了hue-rotate()、saturate()和brightness()函数。


    代码

    1. 要从红色变为绿色，只需将色偏的角度旋转 120°。

      filter: hue-rotate(120deg);

    2. 另一个例子，对于黄色，我们必须修改色调和亮度。

      filter: hue-rotate(60deg) brightness(500%);

    3. 对于其他颜色，我建议使用http://www.rapidtables.com/convert/color/rgb-to-hsl.htm等在线工具（或任何您喜欢的颜色）。

    .verde {
  filter: hue-rotate(120deg);
}
.amarillo {
  filter: hue-rotate(60deg) brightness(500%);
}
html {
  width: 800px;
}
    <img title="Original rojo"
     class="iconos"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro verde"
     class="verde"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro marillo"
     class="amarillo"
     src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>


    2.一个类来定义颜色

    正如您在问题中提到的，您可以通过从以下位置获取资源来更改所有图标的颜色：

    https://download.jqueryui.com/themeroller/images/ui-icons_<<<color>>>_256x240.png

    例如对于 100% 的果岭

    https://download.jqueryui.com/themeroller/images/ui-icons_00ff00_256x240.png

    我们可以在一个类中设置它，它只适用于你想要的图标。


    代码

    我们定义了 class .verde，并且只在第二种情况下应用它：

    .ui-icon.verde {
    background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_00a000_256x240.png);
}
    <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery UI -->
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- body -->
<div>
  <span class="ui-icon ui-icon-circle-check"></span>
  <span class="text">ui-icon-circle-check</span>
</div>
<div>
  <!-- 2do caso, con clase "verde" -->
  <span class="ui-icon ui-icon-circle-check verde"></span>
  <span class="text">ui-icon-circle-check verde</span>
</div>

    我宁愿这样做，并加载一个额外的 4.4KB 图像，而不是根据客户端渲染对每个图标应用过滤器。过滤器非常昂贵。我认为最好已经将颜色计算为服务器上可用的图像。

    • 10