Отображение содержимого на прозрачном изображении

#html #css

#HTML #css

Вопрос:

Я пытаюсь отобразить элементы html (формы, текст и т. Д.) На изображении, Которое было сделано прозрачным с помощью gimp. Но что бы я ни пробовал, содержимое скрыто изображением.

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

Я также пытался поиграть со свойством z-index, но это не сработало.

При перезагрузке страницы я вижу, что текст отображается правильно, но затем изображение отображается и накладывается на него.

 #foo{
  position: relative;
}

#foo img{
  width: 20%;
  height: 20%;
}

#bar{
  position: absolute;
}

 <!DOCTYPE html>
<body>
<div id='foo'>
   <img src='my_img' />
   <div id='bar'>
   <!--This is where I want to write what will be displayed on the transparent image.-->
    </div>
</div>
</body>

Я не нашел подобных ситуаций ни здесь, ни на других сайтах, поэтому любые предложения приветствуются.

Редактировать: на самом деле я установил верхние и левые свойства CSS, и теперь он работает нормально.

1. Свойство id div id = ‘bar’ не завершается должным образом. Этот код, похоже, работал правильно, как только это было исправлено.

2. Я почти уверен, что это ошибка ввода, которой нет в коде, я проверю, когда вернусь домой. Спасибо

3. Только что проверил, написано правильно

Ответ №1:

Рассматривали ли вы фоновое изображение?

 #bar {
  background-image: url('/path/to/myimg.jpg');
  background-size: contain;
  background-position: center center;
}