After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img>
and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image
, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds (in some browsers).
Shorter (but unstable - 74 bytes)
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
I would advise using the slightly longer and more stable version as follows:
? Stable ? (but slightly longer - 78 bytes)
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
As another tip, don't omit image/gif
as one comment suggests. This will break in several browsers.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…