Sovrapposizione immagine su tela HTML5 su immagine

Question

Desidero avere un'immagine caricata dal mio database e sopra di essa la stessa esatta dimensione nella stessa posizione è una tela HTML5.

La maggior parte delle soluzioni che ho trovato utilizza JQuery/JavaScript, tuttavia, se possibile, voglio una soluzione simile usando CSS3 poiché le immagini vengono emesse da un database e possono esserci più di una immagine nella pagina e ogni immagine avrà una tela.

Come posso ottenere questo risultato?

Answer 1

Sì.

È possibile farlo interamente in CSS, ma sarà necessario aggiungere un tubo idraulico specifico per ogni immagine.

Se mai ti sei stancato dell'idraulico in più, javascript potrebbe fare la maggior parte degli impianti idraulici per te.

Ecco un violino della versione CSS-only:

http://jsfiddle.net/m1erickson/g3sTL/

Il codice HTML:

<div class="outsideWrapper"> 
    <div class="insideWrapper"> 
     <img src="house-icon.jpg" class="coveredImage"> 
     <canvas class="coveringCanvas"></canvas> 
    </div> 
</div> 

Naturalmente, nella vostra versione, si dovrebbe sostituire lo src dell'immagine con il vostro dinamica chiamata al database per recuperare l'immagine.

Il CSS:

.outsideWrapper{ 
    width:256px; height:256px; 
    margin:20px 60px; 
    border:1px solid blue;} 
.insideWrapper{ 
    width:100%; height:100%; 
    position:relative;} 
.coveredImage{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px; 
} 
.coveringCanvas{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px; 
    background-color: rgba(255,0,0,.1); 
} 

Answer 2

Possible duplicate.

A seconda del numero di immagini presenti nel database, è possibile avere un ID di tela separato per ciascuna con il nome del file di immagine (ad esempio canvas #foo { background:url(foo.jpg) }). Vorrei caricare questo in un foglio di stile separato. :)

Probabilmente sarebbe più semplice mantenere una soluzione Javascript se il database è dinamico. Basterebbero poche righe di javascript, invece di aggiornare costantemente un foglio di stile con nuovi nomi. Meno errori inclini pure.