БЛОГ НА HUSL


Есть ли способ раскрасить белое изображение PNG только с помощью CSS?

Автор вопроса: Alexandr_TT

Я знаю, что существует много фильтров css, особенно для webkit, но я не могу найти решение для раскрашивания белого (#FFFFFF) изображения. Я пробовал использовать несколько комбинаций фильтров, но ни один из них не сделал мое изображение цветным. Я могу изменить изображение только в диапазоне оттенков grayscale, или sepia.

Итак, мой вопрос: есть ли способ изменить мой полностью белый png на, например красный, используя только css?

Как показано на этом изображении:

введите сюда описание изображения

Свободный перевод вопроса Is there any way to colorize a white PNG image with CSS only? от участника @Balázs Varga.


Источник

Ответы (3 шт):

Автор решения: Alexandr_TT

Это можно сделать с помощью css-маскировки.

http://jsfiddle.net/uw1mu81k/1/

введите сюда описание изображения

-webkit-mask-box-image: url(http://yourimagehere);

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

EDIT

Вы также можете заставить это работать с небольшой помощью svg.

http://jsfiddle.net/uw1mu81k/4/

div {
  width: 50px;
  height: 50px;
  mask: url(#mymask);
  -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>

<svg height="0" width="0">
  <mask id="mymask">
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />
  </mask>
</svg>

Свободный перевод ответа от участника @James Montagne.

→ Ссылка
Автор решения: Alexandr_TT

Это можно сделать с помощью фильтра CSS, который ссылается на фильтр SVG (браузеры webkit + firefox + Edge MS). Вот фильтр SVG.

<svg width="800px" height="600px">
      <filter id="redden">
        <feColorMatrix type="matrix" values="1 1 1 0 0 
                                             0 0 0 0 0 
                                             0 0 0 0 0 
                                             0 0 0 1 0"/>
      </filter>
      
    <image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
    </svg>

Свободный перевод ответа от участника @Michael Mullany.

Update

Добавления от переводчика

Немного теории

введите сюда описание изображения

В матрице три строки значение RGB каналов, четвертая строка альфа канал
Столбцы это цветовые оттенки RGB в основных каналах.

Поэтому в ответе установлено значение:

<feColorMatrix type="matrix" values="1 1 1 0 0 
                                     0 0 0 0 0 
                                     0 0 0 0 0 
                                     0 0 0 1 0"/>

Такие значения дают максимально красный цвет (без оттенков), так как единица в основном канале R и единицы в столбце оттенков (только красный, максимальный-1, смешения каналов G B- нет)

Другие цвета:

Red красный

<filter id="red">
<feColorMatrix
  type="matrix"
  values="1   0   0   0   0
          0   0   0   0   0
          0   0   0   0   0
          0   0   0   1   0 "/>
</filter>

G зелёный

<filter id="green">
<feColorMatrix
  type="matrix"
  values="0   0   0   0   0
          0   1   0   0   0
          0   0   0   0   0
          0   0   0   1   0 "/>
</filter>

B синий


<filter id="blue">
 <feColorMatrix
    type="matrix"
    values="0   0   0   0   0
            0   0   0   0   0
            0   0   1   0   0
            0   0   0   1   0 "/>
</filter>
→ Ссылка
Автор решения: Alexandr_TT

Я попытался раскрасить свое изображение белого облака после ответа @zekkai, а затем написал генератор фильтров.

введите сюда описание изображения

var slider_huerotate = document.getElementById("slider_huerotate");
var slider_brightness = document.getElementById("slider_brightness");
var slider_saturate = document.getElementById("slider_saturate");
var slider_sepia = document.getElementById("slider_sepia");

var output = document.getElementById("demo");
var cloud =  document.getElementById('cloud');
let [brightness , sepia, saturate, huerotate] = ["100", "80", "100","360"];
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
output.innerHTML = filtercolor; // Отобразить значение ползунка по умолчанию
// Обновить текущее значение ползунка (каждый раз, когда вы перетаскиваете ручку ползунка)
slider_huerotate.oninput = function() {
huerotate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_brightness.oninput = function() {
brightness = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_sepia.oninput = function() {
sepia = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_saturate.oninput = function() {
saturate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}
.slider {
    -webkit-appearance: none;
    width: 350px;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

img{
  width:300px;
  z-index:100;
  filter: brightness(100%) sepia(80) saturate(100) hue-rotate(360deg);
  padding:70px 25px 50px 25px;
}

.wrapper{
  width:600px;
  height:500px;
  padding:50px;
  font-size:small;
}

.slidecontainer_vertical{
    margin-top: 50px;
   transform: translate(0,300px) rotate(270deg);
  -moz-transform: rotate(270deg);

}

.left{
  width:50px;
  height:300px;
  float:left;
}

.cloud{
  width:100%;
}

.middle{
  width:350px;
  height:300px;
  float:left;
  margin:0 auto;
}

.right{
  width:50px;
  height:300px;
  float:left;
}

#demo{
  width:100%;
  text-align:center;
  padding-bottom:20px;
  font-family: 'Handlee', cursive;
  }
<head>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<div class="wrapper">
<div class='left'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="360" value="360" class="slider" id="slider_huerotate">
</div></div>
  <div class=middle>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_brightness">
</div>
<div id='cloud'>
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ36u4x5L_01bszwckr2tAGS560HJtQz4qblj0jnvFUPSgyM9DAh7z_L3mmDdF6XRgu8FkTjqJKSNBQ/pub?w=416&amp;h=288"></div>
    <div id='demo'></div>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="80" class="slider" id="slider_sepia">
</div>
  </div>
<div class='right'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_saturate">
</div></div>
</div>

Комментарий автора

Я отредактировал свой код, и теперь вы, вероятно, можете создавать интенсивные цвета. Я заметил, что вы можете генерировать разные цвета, когда добавляете или удаляете «%» к фильтру sepia and saurate, например:"brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);" отличается от "brightness(50%) sepia(100%) saturate(100%) hue-rotate(25deg);" Удалив символ "%", вы можете получить более интенсивные цвета.

Свободный перевод ответа от участника @once.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.