World AIDS
VOTACI
DONAZIONE
AIUTACI A CRESCERE:
DONAZIONE LIBERÀ
DONAZIONE LIBERÀ
MENU
Flusso 
I postatori più attivi del mese
| Nessun utente |
come inserire del testo su un'immagine con CSS o HTML
Pagina 1 di 1
come inserire del testo su un'immagine con CSS o HTML
Da florin88 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
florin88- Admin
- Numero di messaggi : 7128
Data d'iscrizione : 18.12.08
Età : 36
Località : Ca' Savio bronx (VE) -
Argomenti simili» come inserire semplici divisori orizzontali in HTML
» come inserire una barta di scorrimento o meglio di scroll in HTML
» come unire file HTML, CSS e file di testo insieme???
» Come inserire un lettore mp3 per Joomla 1.6
» come inserire i caratteri speciali in ubuntu???
» come inserire una barta di scorrimento o meglio di scroll in HTML
» come unire file HTML, CSS e file di testo insieme???
» Come inserire un lettore mp3 per Joomla 1.6
» come inserire i caratteri speciali in ubuntu???
Pagina 1 di 1
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.
