Прозрачная картинка 1x1

Если не нравится в веб-проектах включать картинки размером 1x1 пиксель в виде отдельных файлов, такие картинки можно включить напрямую в HTML-код или таблицы стилей CSS с
помощью приёма data:image.

Например, полупрозрачный серый блок с Opacity=0.5 можно задать с помощью свойства background-image:


{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgqAcAAIIAgLO2btEAAAAASUVORK5CYII=);}


или напрямую в HTML-коде картинкой:


<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgqAcAAIIAgLO2btEAAAAASUVORK5CYII=">


Удобный конструктор значений data:image для разных оттенков и степени прозрачности можно попробовать на сайте http://px64.net/