World AIDS
AVERT - AIDS charity
Quanti visitatori oggi?
DONAZIONE
AIUTACI A CRESCERE:
DONAZIONE LIBERÀ
Flusso RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


I postatori più attivi del mese


come inserire del testo su un'immagine con CSS o HTML

Andare in basso

come inserire del testo su un'immagine con CSS o HTML

Messaggio Da florin88 il Gio Mag 05, 2011 3:04 am



Vediamo delle soluzioni di come possiamo inserire un testo sopra un'immagine nelle nostre pagine web...

Partiamo da un esempio facile facile con un codice CSS:
La prima soluzione è quella sfruttare la proprietà background dei CSS all'interno di un qualsiasi elemento della pagina contenente il testo.

Supponendo di utilizzare un tag <h3> come il seguente:
Codice:
   
<h3>PRIMA PROVA</h3>
<head>
<style type="text/css">
h3 {
  margin: 0px;
  background-image: url('http://www.nurulizzah.com/site/wp-content/uploads/2009/04/600677-crescent-moon-luna-creciente-0.jpg');
  background-repeat: no-repeat;
  color: #FFFFFF;
  background-color: red;
  font-size: 140%;
  font-weight: normal;
  line-height: 260px;
  text-align: center;
  width: 300px;
  height: 300px;       
}
 </style>
</head>

Ecco il risultato finale che si otterrà:
http://flaviusso.altervista.org/esempio.html

La seconda soluzione è quella di utilizzare i tag HTML
E per fare questo lavoro si devono utilizzare questi tag:

Codice:

<div class="caption">
  <img src="esempio2.jpg" alt="" />
  <span>
      <strong>SECONDA PROVA</strong>
      QUESTA PROVA È UN PÒ PIÙ IMPEGNATIVA DELLA PRIMA
  </span>
</div>


A questi tag html aggiungiamo una serie di tag CSS:
Codice:

<head>
<style type="text/css">
.caption {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
 
.caption img {
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
}
 
.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
   
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}
 
.caption span strong {
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px;
}
</style>
</head>

Adesso per vedere anche questo secondo esempio in azione andate qui:
http://flaviusso.altervista.org/esempio.html



Buon lavoro e Buona Programmazione

avatar
florin88
Admin

Numero di messaggi : 7129
Data d'iscrizione : 18.12.08
Età : 30
Località : Ca' Savio bronx (VE)

Visualizza il profilo http://www.flaviusso.altervista.it

Torna in alto Andare in basso

Torna in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum