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

Для достижения такого эффекта вы можете использовать CSS свойство `mix-blend-mode` в сочетании с `position: absolute` для элементов. 

Вот пример кода:

HTML:
```html
<div class="container">
  <img src="your_image.png" alt="Your Image" class="image">
  <span class="overlay"></span>
</div>
```

CSS:
```css
.container {
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.5; /* Необязательно, устанавливает степень прозрачности изображения */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000; /* Задайте желаемый цвет для span */
}
```

В этом примере, `mix-blend-mode: multiply` указывает браузеру смешивать цвета пикселей изображения с цветами фона, что делает прозрачные пиксели изображения прозрачными и отображает цвет `span` под ними. `opacity` задает степень прозрачности всего изображения в целом.

`position: absolute` устанавливает элементы наложенные друг на друга, и `top: 0` и `left: 0` позиционируют их внутри родительского контейнера.

`.overlay` - это прямоугольный `span` элемент с заданным цветом фона.  

Вы можете настроить цвет, положение и размеры `span` и `image` элементов по своему усмотрению, чтобы достичь желаемого эффекта.