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 jqueryblue

Поэтому, чтобы избежать этого, я подумал, что могу изменить цвет значка на зеленый или любой другой цвет, который мне нужен. Так как если я меняю изображение, меняется цвет всех иконок, и мне нужно изменить только некоторые из них.

Я читал, что его можно использовать 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. Прямой ответ на ваш вопрос

    Если вам интересно поиграться с фильтрами, то можете, хотя я рекомендую 2-й способ (ниже).

    Чтобы изменить оттенок цветов с помощью фильтров, рекомендуется начать со сплошного цвета. Например, давайте используем 100% красный цвет в качестве исходного изображения .

    Мы привыкли иметь дело с RGB, но для фильтров нам приходится использовать HSL (оттенок, насыщенность, яркость). Например:

    • Красный:HSL( 0°, 100%, 50%)
    • Зеленый:HSL( 120°, 100%, 50%)

    А для CSS filterи properties backdrop-filterиспользуются функции hue-rotate() , saturate() и яркости() соответственно.


    Код

    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

    И мы можем установить это в классе, который применяется только к нужным вам значкам.


    Код

    Мы определяем класс .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,4 КБ, а не применять фильтр к каждому значку в зависимости от рендеринга на стороне клиента. Фильтры очень дорогие. Я думаю, что лучше уже рассчитать цвет как изображение, доступное на вашем сервере.

    • 10