Advanced Search

Poner imágenes en elementos de texto pero con accesibilidad

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.