Posted By

sendoa on 09/04/08


Tagged

imagen TEXTO por


Versions (?)

Poner imágenes en elementos de texto pero con accesibilidad


 / Published in: CSS
 

URL: http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/

Esta técnica sirve para poner imágenes en elementos que originalmente son de texto. Por ejemplo en un etc. Por supuesto la clave está en mantener la accesibilidad.

Hay otra técnica que lo que hace es darle un indent al texto de -9999 para que no se vea y aplicar al elemento una imagen de fondo.

  1. La parte HTML
  2.  
  3. <h1 id="logo">Qbikode Solutions, S.L.<span></span></h1>
  4.  
  5. La parte CSS (suporponemos la imagen al texto)
  6.  
  7. h1#logo {
  8. height: 110px;
  9. overflow: hidden;
  10. position: relative;
  11. width: 560px;
  12. }
  13. h1#logo span {
  14. background: url(/img/logo.gif) no-repeat;
  15. display: block;
  16. height: 100%;
  17. left: 0;
  18. position: absolute;
  19. top: 0;
  20. width: 100%;
  21. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Rauto on September 7, 2008

Una pregunta: ¿poniendole el text-indent pierde la accesibilidad?

You need to login to post a comment.