Posted By

blueshome on 04/07/08


Tagged

image-replacement


Versions (?)

cover-up span


 / Published in: CSS
 

  1. /*La Cover-Up span
  2.  
  3. Ideata da Tom Gilder è attualmente, oltre alla FIR, l' unica tecnica di image
  4. replacement con markup aggiuntivo. Usa uno span senza contenuto testuale viene
  5. anteposto al testo dell' header. Vediamo l' html:
  6.  
  7. <h1><span></span>Nome del sito</h1>
  8.  
  9. Lo span attraverso un posizionamento assoluto viene a coprire il testo.
  10. Ecco il css:*/
  11.  
  12. h1{
  13. position: relative;
  14. width: 300px;
  15. height: 100px
  16. }
  17.  
  18. h1 span{
  19. position: absolute;
  20. width: 100%;
  21. height: 100%;
  22. background: url(...) no-repeat
  23. }
  24.  
  25. /*A differenza delle altre tecniche non usa hack per poter funzionare sul
  26. maggior numero di browsers, e personalmente ritengo che sia la migliore
  27. tecnica di image replacement in assoluto dato che è, e soprattutto sarà,
  28. compatibile con tutti i browsers con supporto minimo dei css. L' unico
  29. svantaggio è che richiede uno span aggiuntivo.*/

Report this snippet  

You need to login to post a comment.