Rodrigo Borrego Bernabé - Software Developer




Reemplazar texto con imágenes vía CSS

Category : HTML/CSS, Programación · by Mar 22nd, 2011

Motivación

  1. Quiero una imagen en mi botón/enlace/elemento de menú/loquesea
  2. Quiero que los que no vean las imágenes (navegadores modo texto, bots, lectores de pantalla, etc.) tengan un texto equivalente
  3. Quiero que los demás no vean ese texto

HTML:

<div class="miclase">Mi texto alternativo</div>

CSS:

.miclase {
 text-indent: -100em;
 overflow: hidden;
 background: url(miimagen.png) no-repeat;
 height: 100px;
 width: 100px;
 }
SHARE :

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.