Невозможно отобразить белый текст поверх изображения SVG

Question

У меня есть изображение SVG за текстом, изображение имеет прозрачность, и я хочу, чтобы текст имел цвет white, но я не знаю, почему я не вижу текст, только если я изменяю цвет наblack.Я хочу знать, что я могу сделать, кроме возможности конвертировать изображение в формат без прозрачности.

Вот скрипка с кодом http://jsfiddle.net/rgaop03c/3/

<div>
  <img src="https://svgshare.com/i/72b.svg" alt="Hand" style="position: absolute;/* width: 303px; */height: 100%;bottom: 0px;right: 0px;z-index: 0;">
  <div class="info_text" style="width: 870px;text-align: center;font-size: 21px;line-height: 2;color: rgb(255, 255, 255);margin: 0px auto;">Random text right here</div>
</div>

Answer 1

Изменить z-index: 0; на z-index: -1;

<div>
  <img src="https://svgshare.com/i/72b.svg" alt="Hand" style="position: absolute;/* width: 303px; */height: 100%;bottom: 0px;right: 0px;z-index: -1;">
  <div class="info_text" style="width: 870px;text-align: center;font-size: 21px;line-height: 2;color: rgb(255, 255, 255);margin: 0px auto;">Random text right here</div>
</div>

Answer 2

z-index: -1 делает свое дело.

<div>
  <img src="https://svgshare.com/i/72b.svg" alt="Hand" style="position: absolute;/* width: 303px; */height: 100%;bottom: 0px;right: 0px;z-index: -1;">
  <div class="info_text" style="width: 870px;text-align: center;font-size: 21px;line-height: 2;color: rgb(255, 255, 255);margin: 0px auto;">Imbunatatim deja constant serviciile online, oferind clientilor nostri functii avansate de identificare a ofertelor imobiliare cautate. Ne-am dedicat dezvoltarii continue de concepte si instrumente noi, care sa ofere tuturor un grad ridicat de incredere in serviciile si echipa imocentral.ro.</div>
</div>

Вы также можете установить z-index: 1 для div class = "info_text".Но обратите внимание: z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).