F3Información importante puesta solo como imagen de fondo en CSS

En el siguiente ejemplo, parte del contenido está incluido en una imagen que se presenta únicamente mediante CSS. En este ejemplo, la imagen TopRate.png es una imagen de 180 por 200 píxeles que contiene el texto "19.3% APR Typical Variable" («TAE variable habitual del 19,3 %»).

p#bestinterest {
   padding-left: 200px;
   background: transparent url(/images/TopRate.png) no-repeat top left;
 }

Se utiliza en este fragmento:

<p id="bestinterest">Where else would you find a better interest rate?</p>

Un distribuidor de libros utiliza imágenes de fondo para mostrar iconos junto a una lista de títulos de libros e indicar si son novedades, de edición limitada, si hay existencias o si están agotados.

El CSS contiene:

ul#booklist li {
   padding-left: 20px;
 }
 ul#booklist li.new {
   background: transparent url(new.png) no-repeat top left; 
 }
 ul#booklist li.limited {
   background: transparent url(limited.png) no-repeat top left; 
 }
 ul#booklist li.instock {
   background: transparent url(instock.png) no-repeat top left; 
 }
 ul#booklist li.outstock {
   background: transparent url(outstock.png) no-repeat top left; 
 }

Se utiliza en este fragmento:

<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

Usando el código del ejemplo 1, la misma imagen de fondo se declara en el atributo style de HTML:

<p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;">
   Where else would you find a better interest rate?<p>

En el siguiente código, la declaración de la imagen de fondo se crea en un script de cliente:

<script>
   var newP = document.createElement('p');
   var newPText = document.createTextNode('Where else would you find a better interest rate?');
   newP.appendChild(newPText);
   newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
   document.body.appendChild(newP);
</script>