advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

blueshome on 04/07/08


Tagged

image-replacement


Versions (?)


cover-up span

Published in: CSS 

Plain TextExpand 
  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.