У меня есть два изображения, один из которых представляет собой маленькую иконку, которая накладывается поверх первого изображения. Мой значок имеет белый фон, поэтому, когда значок помещается поверх другого изображения, мы получаем этот эффект, когда над изображением появляется белый квадрат. В идеале, я не хочу отображать этот белый фон поверх другого изображения. Есть ли свойство CSS, которое я могу применить к своему значку, чтобы сделать его белый фон прозрачным?
Сделать белый фон изображения прозрачным в css
Ответ 1
Лучший способ - использовать программное обеспечение, такое как Photoshop или Paint.Net.
Я бы рекомендовал Paint.Net. Вы должны удалить белый фон в Paint.Net и сохранить img как .png.
Ответ 2
На самом деле есть способ, хотя он поддерживается только в Chrome, Firefox и Safari. Если цвет фона белый, вы можете добавить свойство CSS:
mix-blend-mode: multiply;
Подробнее об этом можно узнать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Ответ 3
Нет. Еще нет...
Однако он очень близок к возможности. Ознакомьтесь с этой статьей о CSS Filters, экспериментальной функции css, которая делает некоторые вещи на стороне клиента, которые являются опрятными.
Ответ 4
Opacitator
mix-blend-mode работает для некоторых браузеров, но мы обнаружили, что он вызывает проблемы с производительностью в Chrome, я понятия не имею, почему.
Дизайнер из моей команды придумал этот гениальный хак, где вы создаете слой, который в основном прозрачный, но когда он наложен на белый фон, его цвет будет соответствовать цвету окружающего фона.
Способ, которым этот "волшебный" цвет найден; это вычисление того, насколько темнее должна быть каждая цветовая ось для степени удаления непрозрачности. Формула для этого
255 - ( 255 - x )/opacity. Проблема заключается в следующем: если непрозрачность установлена слишком низкой, формула дает вам отрицательные числа (которые не могут быть использованы). Если непрозрачность слишком высока, вы получите некоторые цвета на не белых участках вашего изображения.
Первоначально мы использовали электронную таблицу, которая выполняла бы расчеты, и методом ручной проб и ошибок мы обнаружили, что цвет Goldilox.
Как только мы начали использовать sass, я понял, что это можно сделать с помощью бинарного поиска. Поэтому я создал функцию sass, которая делает всю работу за нас.
Проверьте эту суть на sassmeister. Передайте свой цвет фона в функцию opacitator в строке 56 sass-кода. и использовать сгенерированный цвет rgba в div (или псевдоэлементе) для наложения изображения.
Я также создал рабочий пример на codepen.
Ответ 5
Вы можете создать контейнер для своего изображения. Затем для css контейнера:
overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;
Надеюсь, это поможет.:)
Ответ 6
Вы можете использовать это действие Photoshop для удаления белого фона. Мне также интересно, есть ли решение удалить белый фон изображения с помощью CSS или HTML и сделать его прозрачным.