Ho risolto senza l'utilizzo di JavaScript.
Ho utilizzato una div prima del testo che deve apparire sotto l'immagine, usando position: absolute e background-image() e z-index e non specifidando left e top ma solo width e height (uguali a quelli dell'immagine di fondo).
....
<div style="z-index: 1; position: absolute; width:520px; height: 60px; background-image: url(...);background-repeat:no-repeat;background-position: center 0px;">
</div>
TESTO TESTO TESTO
...
...
Usando una tecnica derivata dall'image replacement /cioè con background-image in definitiva) posso fare a meno del JavaScript, tuttavia ho un effetto collaterale: il timbro risulta essere sotto il testo piuttosto che sopra.
Ciao, grazie per la risposta.
L'image replacement però serve a 'sostituire' un testo con una immagine che ne contiene la sua rappresentazione.
Il mio problema è, invece, mettere sopra un testo contenuto in una cella, una immagine in modo da ottenere una specie di timbratura, per capirci.
Salve a tutti. Ho un problema che ho risolto usando CSS+JavaScript ma volevo sapere se era in qualche modo possibile risolvere la questione col solo uso dei CSS.
Ho una tabella con una serie di righe ed una colonna. In alcune di queste celle, che contengono del testo, voglio sovrapporre una gif con trasparenza che rappresenta una scritta obliqua, in maniera tale da creare un effetto tipo 'timbrato'.
Per ottenere questo effetto non avevo fatto altro che aggiungere, alla fine del testo della cella di interesse, una span contenente l' immagine, con position:relative e agendo su left e top di conseguenza per metterla nel posto giusto.
Tuttavia, essendo la span posizionata relativamente, l'altezza della cella ne viene influenzata risultando più alta del dovuto, come se la span fosse allq fine del testo.
Per 'tagliare' l'eccedenza, ho provato a racchiudere tutto il contenuto della cella in una div, dando a questa overflow:hidden e height: Npx. Naturalmente questa soluzione non è ottimale perché, a seconda del browser e della risoluzione, il valore N dell'altezza può cambiare.
A questo punto ho optato per JavaScript. In pratica ho aggiunto, nella OnLoad del body, uno script che ridimensiona automaticamente le celle in oggetto togliendo dalla loro altezza quella della gif.
//obj è la div che contiene tutto il contenuto della cella
h=obj.offsetHeight-60; // 60 = altezza bitmap
obj.style.height=h+'px';
obj.style.overflow='hidden';
Così sembra funzionare ma naturalmente sono dipendente da JavaScript, che potrebbe essere disabilitato.
Esiste quindi un metodo per fare ciò senza ricorrere a scripting ?