Прозрачный цвет фона в изображении

Как я могу удалить или сделать прозрачным определенный цвет фона в изображении или backgroundimage? Например, у меня есть изображение, и я хочу удалить все белые пиксели в нем, чтобы показать, что "позади" их на странице.

<div style="
    background-color: #F4F4F7;
    background-image: url('wa.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 200px 280px;"
align="left">

Какие функции или атрибуты могут выполнить это?

Ответ 1

Я считаю, что нет javascript или HTML o CSS-свойство, атрибут или функция, которые могут делать то, что вы просите.

Вам нужно удалить фон в редакторе изображений и сохранить изображение в формате .gif или png с прозрачным фоном.

Я использую это с Paint.Net, но вы можете сделать это с любым графическим редактором, который у вас есть.

Ответ 2

При настройке свойства background в CSS вы можете добавить прозрачный фон в div с изображением, подобным этому:

#myDiv {
 background:transparent url(myImage);
 }

Ответ 3

Вы можете просматривать только прозрачные изображения в формате PNG. В вашем примере вы используете формат JPG, который не имеет прозрачности независимо от того, что вы делаете (если вы не собираетесь использовать атрибут непрозрачности в css). Либо используйте .gif или .png при сохранении изображения для получения желаемого результата.

Ответ 4

добавьте следующую строку в css

mix-blend-mode: multiply;

Вы можете увидеть цвет фона и белые пиксели.

Ответ 5

Вот один из способов достижения этого.

Нарисуйте изображение на холсте.
Удалите все белые (или предпочтительные цвета) пиксели.