Как сделать чтобы там где у png картинки есть пиксели она становилась прозрачной и показывала span под собой?

Чтобы реализовать такой эффект в HTML, вам понадобится использовать комбинацию CSS и JavaScript.

1. Сначала, вам понадобится создать структуру HTML, содержащую картинки и спаны. Например:

<div class="image-container">
  <img class="transparent-image" src="path/to/your/image.png" alt="Your Image">
  <span class="hidden-span">Your content here</span>
</div>

В этом примере мы создали контейнер див с классом "image-container", содержащий картинку и спан. Класс "transparent-image" применяется к изображению, которому вы хотите добавить прозрачность. Класс "hidden-span" применяется к спану, который будет скрыт.

2. Для достижения прозрачности картинки и показа спана, вы можете использовать CSS. Например:

.image-container {
  position: relative; /* установка позиции относительно родительского элемента */
  display: inline-block; /* отображение элемента как блок с возможностью настройки ширины и высоты */
}

.transparent-image {
  position: absolute; /* установка позиции абсолютно внутри контейнера */
  top: 0; /* верхний край картинки */
  left: 0; /* левый край картинки */
  opacity: 0; /* установка начальной прозрачности картинки */
}

.hidden-span {
  position: absolute; /* установка позиции абсолютно внутри контейнера */
  top: 0; /* верхний край спана */
  left: 0; /* левый край спана */
  z-index: 1; /* установка индекса z для спана, чтобы он находился над картинкой */
}

В этом примере мы устанавливаем картинку в абсолютное положение внутри контейнера, чтобы она занимала всю доступную область и была над спаном. Мы также устанавливаем начальную прозрачность 0 для картинки с помощью свойства "opacity". Спан также находится в абсолютном положении и имеет высокий индекс Z, чтобы быть над картинкой.

3. Наконец, чтобы изменить прозрачность картинки и показать спан, когда есть пиксели png изображения, вам понадобится JavaScript. Ниже приведен пример с использованием jQuery:

$(document).ready(function() {
  $('.transparent-image').each(function() {
    var img = $(this)[0];
    
    img.onload = function() {
      var transparentPixels = 0;
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
  
      canvas.width = img.width;
      canvas.height = img.height;
  
      ctx.drawImage(img, 0, 0);
  
      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var pixelData = imageData.data;
  
      for (var i = 0; i < pixelData.length; i += 4) {
        var alpha = pixelData[i + 3];
  
        if (alpha === 0) {
          transparentPixels++;
        }
      }
  
      if (transparentPixels > 0) {
        $(img).css('opacity', 1);
        $(img).siblings('.hidden-span').css('display', 'block');
      }
    };
  });
});

Этот код выполняется при загрузке документа (событие "ready") и находит все элементы с классом "transparent-image". Для каждой из этих картинок он создает временный "canvas" элемент, рисует изображение на нем и получает данные пикселей. Затем он проверяет каждый пиксель на нулевую прозрачность (alpha = 0) и если есть хотя бы один прозрачный пиксель, он устанавливает полную прозрачность картинки (значение 1) и показывает спан (изменяет свойство "display" на "block").

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