Problemi con CSS Box-Shadow: Inserto sull'immagine

Question

Sto tentando di replicare l'effetto "Vignette" CSS, detailed on Trent Walton's site.

.vignette1 { 
    box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5); 
    float: left; 
} 

.vignette1 img { 
    margin: 0; 
    position: relative; 
    z-index: -1; 

    width: 320px; 
    height: 247px; 
} 

Funziona bene in isolamento, ma ha problemi sul mio sito di produzione, in cui le impostazioni di sfondo per un genitore div sostituiscono lo z-index sull'immagine - vivere jsFiddle demo here.

Il secondo approccio - menzionato nei commenti dell'articolo originale e incluso nella demo - funziona bene, ma la mia immagine deve essere racchiusa nel tag - non può essere al di sotto di esso.

Answer 1

alla fine ho trovato il 'Overlay & incasso Metodo', il secondo dei Jordon Dobsons's techniques essere il più efficace e meno dipendente dalle negativi z-index:

/* Border & Vignette Setup */ 

    figure{ 
     position:    relative; 
     display:    block; 
     line-height:   0; 
     width:     500px; 
     height:     333px; 
     margin-bottom:   2em; 
     border:     1em solid #fff; 
     -webkit-box-shadow:  0 .1em .3em rgba(0,0,0,.25); 
     -moz-box-shadow:  0 .1em .3em rgba(0,0,0,.25); 
    } 

    figure::before{ 
     content:    ""; 
     position:    absolute; 
     top:     -1em; 
     bottom:     -1em; 
     left:     -1em; 
     right:     -1em; 

    } 

    figure::before, 
    figure img{ 
     outline:    1px solid #ccc;  
    } 

    figure.vignette img{ 
     z-index:    1; 
     position:    relative; 
     display:    block; 
     width:     100%; 
     height:     100%; 

    } 

/* Overlay & Inset Method */ 

    figure.overlay.inset::after{ 

    /* Mozilla Settings */ 
     -moz-box-shadow:  inset 0 0 150px rgba(0,0,0,.75);  

    /* Webkit Setting */ 
     -webkit-box-shadow:  inset 0 0 150px rgba(0,0,0,.75); 
    } 

(jsFiddle demo utilizzando layout originale)

Answer 2

La pagina ha uno sfondo bianco pieno, stai dando all'immagine uno z-indice di -1, quindi va sotto quel div. Ci sono diverse soluzioni, a seconda di come il vostro disegno finale è andare a guardare, ma se basta fare #page trasparente funziona:

http://jsfiddle.net/tA8EA/

o si può anche impostare la pagina per posizionare realtive e dargli un più basso z-index rispetto all'immagine: http://jsfiddle.net/PEgBv/

Answer 3

ho posto una risposta con la lista di immagine dinamica di carico here. Invece di un'immagine con indice sottozero ci sono solo DIV con dimensioni immagine-immagine e immagine impostate.