3

Меня интересует динамическое изменение изображения с прозрачным фоном и достижение этого с помощью CSS.
Что мне действительно нужно, так это создать своего рода силуэт, чтобы ко всем непрозрачным пикселям был применен цвет. В данном случае Black.

До и после должны выглядеть примерно так:

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

Обратите внимание, что у обоих изображений прозрачный фон.

Есть ли метод, который можно использовать для этого с помощью CSS?

Если нет, есть ли простой способ создать силуэт и переключаться между двумя изображениями на стороне клиента в контексте веб-страницы?

Свободный перевод вопроса Overlay non-transparent area of image with CSS от участника @Selfish.

1

3 ответа 3

3

Подобного эффекта можно добиться с помощью фильтров webkit:

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: contrast(0%);
    -webkit-filter: brightness(0%);
}

img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-filter: contrast(100%);
    -webkit-filter: brightness(100%);
} 

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: contrast(0%);
    -webkit-filter: brightness(0%);
}

img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-filter: contrast(100%);
    -webkit-filter: brightness(100%);
}
<img src="https://i.sstatic.net/gZw5u.png" alt="">

Обратите внимание, что этот метод поддерживается не всеми браузерами. Для поддержки IE вы можете установить это как фоновое изображение и изменять его при наведении курсора.


Использование двух изображений для лучшей совместимости с браузером

Если вы хотите использовать два изображения, вы можете добиться того же эффекта с гораздо более широкой поддержкой браузера, просто поменяв изображение местами при наведении курсора. Что-то вроде этого:

div {
    height: 400px;
    width: 400px;
    background-image: url('https://i.sstatic.net/Pmz7l.png');
    background-repeat: no-repeat;
}

div:hover {
    background-image: url('https://i.sstatic.net/gZw5u.png');
}

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: contrast(0%);
    -webkit-filter: brightness(0%);
}

img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-filter: contrast(100%);
    -webkit-filter: brightness(100%);
}

div {
    height: 400px;
    width: 400px;
    background-image: url('https://i.sstatic.net/Pmz7l.png');
    background-repeat: no-repeat;
}

div:hover {
    background-image: url('https://i.sstatic.net/gZw5u.png');
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>
<div></div>

Улучшенный пример, поддерживающий все цвета

Это решение требует немного больше работы, но поддерживает все цвета, а не только черный!

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>
<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="0 0 0 0 0.6588
              0 0 0 0 0.4745
              0 0 0 0 0.1686
              0 0 0 1 0" />
  </filter>
</svg>

Вот важные моменты:

В этом методе используется , в основном расширенная функция для определения ваших собственных фильтров. Здесь я свел все цветовые каналы к нулю (все нули для первых четырех столбцов), а затем добавил к ним постоянное значение, которое мне было нужно (это последний столбец). Убедитесь, что в теге указан type = "matrix", а в теге задается color-interpolation-filters = "sRGB", иначе матрица будет интерпретироваться по-разному.

Эти сообщения были очень полезны, если вы хотите узнать больше:

https://alistapart.com/article/finessing-fecolormatrix

https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

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

1

Решение с помощью canvas. Загруженное изображение отрисовывается на двух неотображаемых холстах: canvas1 - как есть, canvas2 - только силуэт. Цвет силуэта определен константой COLOR, а источник изображения с прозрачным фоном - IMG_SRC.

const COLOR = 'rgb(45,165,30)';
const IMG_SRC = 'https://i.sstatic.net/gZw5u.png';

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
let w,h;
canvas.addEventListener('mouseover', showFace);
canvas.addEventListener('mouseleave', hideFace);

let canvas1 = document.createElement('canvas');
let ctx1 = canvas1.getContext('2d');

let canvas2 = document.createElement('canvas');
let ctx2 = canvas2.getContext('2d');

let img = new Image();
img.src = IMG_SRC;
img.addEventListener('load', drawImage);

function drawImage(e){
    let image = e.path[0];
    w = canvas.width = canvas1.width = canvas2.width = image.naturalWidth;
    h = canvas.height = canvas1.height = canvas2.height = image.naturalHeight;
    
    ctx1.drawImage(image,0,0);
    
    ctx2.drawImage(image,0,0);
    ctx2.globalCompositeOperation = 'source-in';
    ctx2.fillStyle = COLOR;
    ctx2.fillRect(0,0,w,h);
    
    ctx.drawImage(canvas2,0,0);
}

function showFace(){
    ctx.clearRect(0,0,w,h);
    ctx.drawImage(canvas1,0,0);
}

function hideFace(){
    ctx.clearRect(0,0,w,h);
    ctx.drawImage(canvas2,0,0);
}
<canvas></canvas>

2
  • наверное согласишься, что на SVG это сделать намного проще, чем в canvas. Ответ конечно очень полезен для разработчиков в canvas Для некоторого усложнения сможешь добавить какую-нибудь анимацию, любую, на твой вкус Commented 28 июл. 2021 в 17:22
  • Зато какой цвет))) Вообще я хотел по-другому сделать: перебрать данные изображения и попиксельно преобразовать в нужный цвет если есть цветность пикселя, но по ходу работы резко обленился))) Код может быть гораздо проще, но я следовал рекомендациям и отрисовал все на разных холстах, потом только подставляю результат. Это быстро и эффективно. Конечно, для этой задачи больше подходит вариант с фильтрами, ведь можно по сути задать правила CSS всем изображениям, а мне придется переделывать код и плодить множество теневых холстов. Тогда нужен вариант с перерисовкой одного собственного холста.
    – Leonid
    Commented 28 июл. 2021 в 17:31
1

Мне хотелось бы, в связи с крайним примером из ответа, немного остановиться на анализе возможностей фильтра SVG feColormatrix

Ниже схема, объясняющая значения параметров этого фильтра из статьи Finessing feColorMatrix написанная Una Kravets

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

Из схемы становится понятно, что зелёный цвет силуэта получится при установке значения во вторую строку (канал G)

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="0 0 0 0 0
              0 0 0 0 0.7
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>
</svg>

Красный цвет получается при установке значения канала R 1 строка, 4 столбец

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="0 0 0 0 1
              0 0 0 0 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>
</svg>

Смешивание каналов: R+B - пурпурный цвет

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="0 0 0 0 1
              0 0 0 0 0
              0 0 0 0 1
              0 0 0 1 0" />
  </filter>
</svg>

В следующем примере мы повторно используем матрицу из примера пурпурного и добавляем 100% альфа-канал на синем уровне. Мы сохраняем красные значения, но переопределяем любой красный цвет в тенях, поэтому все цвета теней становятся синими, а самые светлые значения, в которых есть красный цвет, становятся смесью синего и красного (пурпурного).

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="1 0 0 0 0
              0 0 0 0 0
              0 0 1 1 0
              0 0 0 1 0" />
  </filter>
</svg>

Если бы это последнее значение было меньше 0 (до -1), произошло бы обратное. Тени станут красными, а не синими. При -1 они создают идентичные эффекты:

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="1 0 0 0 0
              0 0 0 0 0
              0 0 1 -1 0
              0 0 0 1 0" />
  </filter>
</svg>

Мы можем повлиять на общую альфа отдельных каналов через четвертую строку. В примере ниже убирается красный канал. 4 строка 1 столбец -2 (убираются красные оттенки лица)

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              -2 0 0 1 0" />
  </filter>
</svg>

GRAYSCALE

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>

<svg>
  <filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" />
  </filter>
</svg>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.