Return

Question

I have several images on a page contained in one sprite image, these images must be contained within one sprite due to other requirements of the site.

Despite the fact that in most browsers this works fine, I have a problem with Opera Mini, where it does not create a sprite at all and just displays the whole image.

Is there any CSS that can be used to provide an alternative to text when the browser cannot display the sprite?

Answer 1

A bit confused. Does the sprite not render, but display the entire image? Do you see all sprites at once or nothing at all?

opera mini ( , , ).

-, .

.

allbrowsers.css

div.sprite {
  width:20px;
  height:20px;
  background:transparent url(img/mysprites.gif) no-repeat scroll top left;
  overflow:hidden;
  text-indent:-5000px;
}
#first_sprite {
  background-position:20px 40px;
}

mobilebrowsers.css

div.sprite {
  background-image:none;
  text-indent:0;
}

<div id="first_sprite" class="sprite">Alternate text</div>