Как убрать “родной” белый фон иконки, чтобы он не перекрывал фон родительского блока?

#javascript #html #css

Есть иконка-домик. Домик черный, на белом фоне - это сама картинка. А родительский
блок-контейнер серый:


  



И в итоге получается белая квадратная картинка с домиком. Как убрать фон самой картинки,
чтобы он не светился поверх родительского блока, а отображался только сам домик(его
контуры) поверх серого фона? Надеюсь, понятно объяснил...
    

Ответы

Ответ 1

Откройте home.svg в редакторе и поищите элемент, являющийся белым фоном. Искать следует
элемент с атрибутом fill="#ffffff" или fill="#fff" или fill="white" или fill="rgb(255,255,255)".
Затем, либо удалите этот атрибут, либо добавьте fill-opacity="0".

Если внутри свгшки картинка закодированная в base64, то конвертируйте её обратно
в png и сотрите фон в каком-нибудь редакторе, позволяющим работать с альфой.


Ответ 2

В данный момент у тебя изображение с непрозрачным фоном и формат у него jpg скорее
всего. В фотошопе сделай изображению прозрачный фон и сохрани как png. Пример как это
делается: https://www.templatemonster.com/help/ru/photoshop-how-to-make-image-transparent.html