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

193

06 мая 2019, 04:40

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

<div class="container" style="background-color:grey;">
  <img src="home.svg">
</div>

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

Answer 1

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

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

Answer 2

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