Ciao,
per far funzionare in quel modo lo z-index, dal momento che si tratta di un elemento figlio dentro un elemento genitore, dovresti utilizzare un ulteriore elemento contenitore e attribuire, a tutti e tre, un position:relative (o absolute), quindi giocare un po con il valore di z-index.
Questo è quanto sono riuscito ad ottenere dopo qualche semplice googleata tipo "z-index child parent":
codice:
#contenitore{
position:relative;
z-index: 10;
}
#tdprova{
position:relative;
width:200px;
height:200px;
background-image: url("cornice.png");
z-index: initial;
}
#imgprova{
position:relative;
width:100px;
height:100px;
z-index: -1;
}
...
<div id="contenitore"><div id="tdprova"><img id="imgprova" src="9.jpg" alt="9"></div></div>
Scavando un po' più a fondo si può trovare diverso materiale per ottenere delle soluzioni al problema.
Posto un esempio funzionante con tre differenti soluzioni da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
/* ------ Metodo 1: outline ------
*/
#img1 {
outline:10px solid rgba(119, 119, 119, .7);
outline-offset:-10px;
}
/* ------ Metodo 2: border-box ------
*/
#img2{
display:inline-block;
box-sizing:border-box;
border:solid rgba(119, 119, 119, .7);
border-width:10px 10px 30px;
}
/* ------ Metodo 3: div:after ------
*/
#img3{
display:inline-block;
}
#img3>div{
position:relative;
}
#img3>div>img{
display:block;
}
#img3>div:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
border:solid rgba(119, 119, 119, .7);
border-width:10px 10px 30px;
}
</style>
</head>
<body>
<h1>Cornice trasparente sopra immagine</h1>
<h2>Metodo 1: outline</h2>
<ul>
<li>E' utilizzato un semplice tag img</li>
<li>La cornice può avere un solo spessore uguale per tutti i lati</li>
<li>La proprietà outline-offset non è supportata da IE</li>
</ul>
<img id="img1" src="image.jpg">
<hr>
<h2>Metodo 2: border-box</h2>
<ul>
<li>La cornice può avere spessori differenti per i singoli lati</li>
<li>L'immagine è impostata come background di un div</li>
<li>E' necessario specificare le dimensioni esatte dell'immagine</li>
</ul>
<div id="img2" style="background:url('image.jpg');width:200px;height:200px;"></div>
<hr>
<h2>Metodo 3: div:after</h2>
<ul>
<li>La cornice può avere spessori differenti per i singoli lati</li>
<li>E' utilizzata una struttura di più elementi nidificati (due div e un tag img)</li>
</ul>
<div id="img3"><div><img src="image.jpg"></div></div>
<hr>
</body>
</html>
Rispondi quotando
