testo su foto

**fanoste** · 02-09-2008, 09:37

ciao a tutti.

in una pagina devo mostrare delle foto (da un database) con relativa descrizione.

ora ho visto questo effetto su un sito e vorrei riprodurlo..

come si fa coi css??

grazie 1000 per l'aiuto

**ricman** · 02-09-2008, 09:41

Hai tre possibilità:
1) Photoshop (o chi per esso) visto che ci hai fatto vedere una foto
2) Studiare le funzioni php per crearti le immagini

3) L'esempio non è come ce lo hai fatto vedere e allo basta sovrapporre di una trentina di px un div (contenente il testo) alla foto. A tale div puoi assegnare, ad esempio, un sfondo fatto in png (un bianco con 50% di trasparenza)

**fanoste** · 02-09-2008, 09:51

Originariamente inviato da ricman
Hai tre possibilità:
1) Photoshop (o chi per esso) visto che ci hai fatto vedere una foto
2) Studiare le funzioni php per crearti le immagini

3) L'esempio non è come ce lo hai fatto vedere e allo basta sovrapporre di una trentina di px un div (contenente il testo) alla foto. A tale div puoi assegnare, ad esempio, un sfondo fatto in png (un bianco con 50% di trasparenza)

non posso farlo in photoshop perchè foto e descrizioni li pesco da un db in asp (e fin qui nessun problema).
quello che non so come fare è la sovrapposizione dello sfondo e del testo sulla foto, magari in css....

**ricman** · 02-09-2008, 10:32

Originariamente inviato da fanoste
quello che non so come fare è la sovrapposizione dello sfondo e del testo sulla foto, magari in css....

Scrivo di getto... provalo e poi vediamo cosa non ti torna...

codice:

<div class="gino">
  [img]fotopresadaldb.jpg[/img]
  

$testo


</div>

.gino {
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.gino p {
  background-image: url(percorso/fotosfondo.png);
  width: 100px;
  height: 50px;
  overflow: hidden;
  position: relative;
  color: #000;
  top: npx;
}

Dove "fotosfondo.png" la fai con software di grafica di 1x1px bianca con trasparenza al 50%

**ricman** · 02-09-2008, 10:33

Oppure se vuoi evitare i posizionamenti puoi mettere la foto come sfondo del div "gino"

**fanoste** · 02-09-2008, 14:26

non si vede nulla...

questo il codice nella pagina html:
<div class="gino"> [img]images/pub4.jpg[/img]

$testo

</div>

questo quello nel css:
.gino {
width: 377px;
height: 567px;
overflow: hidden;
}
.gino p {
background-image: url(images/fotosfondo.png);
width: 377px;
height: 50px;
overflow: hidden;
position: relative;
color: #000;
top: npx;
}

**ricman** · 02-09-2008, 14:52

Hai un link? si farebbe prima...

**ricman** · 02-09-2008, 15:05

Facciamo così: ti scrivo un esempio di sovrapposizione... poi lo adatti tu...
Scrivilo in un html vuoto

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
	<head>
		<title>vvvvvvvv</title>
		
		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="imagetoolbar" content="no" />
		
		<style type="text/css">
		.gino {
			width: 300px;
			height: 200px;
			overflow: hidden;
			border: 1px solid #000;
		}
		
		.gino p {
			background: #555;
			width: 250px;
			height: 50px;
			overflow: hidden;
			color: #000;
			border: 1px solid red;
			display: block;
			position: relative;
			top: -60px;
		}
		
		</style>

		</head>

<body>

<div class="gino">
	
	

testotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo testotestotesto testo tes</p>
</div>




</body>
</html>

**fanoste** · 02-09-2008, 15:17

perfetto !!!

grazie 1000 così funziona alla grande !!!

grazie ancora!

Discussione: testo su foto

Strumenti discussione

Ricerca discussione

Visualizza

testo su foto

Permessi di invio