Problemas con CSS Box-Shadow: recuadro en la imagen

Question

Estoy tratando de reproducir el efecto CSS 'Viñeta', 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; 
} 

Funciona bien en forma aislada, pero tiene problemas en mi sitio de producción, donde la configuración del fondo de un padre div anulan el índice z en la imagen - vivir jsFiddle demo here.

El segundo enfoque - mencionado en los comentarios del artículo original y incluido en la demostración - funciona bien, pero mi imagen debe estar envuelta en la etiqueta - no puede estar debajo de ella.

Answer 1

al final encontró el 'Overlay & Inset Método', el segundo de Jordon Dobsons's techniques ser el más eficaz y menos dependiente de negativos índices de z:

/* 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 utilizando trazado original)

Answer 2

página tiene un fondo blanco sólido, le está dando a la imagen un índice z de -1, por lo que va por debajo de ese div. Hay varias soluciones, dependiendo de cómo su diseño final se va a ver, pero si usted acaba de hacer #page transparente funciona:

http://jsfiddle.net/tA8EA/

O también se puede configurar para posicionar la página realtive y darle una menor z-índice de la imagen: http://jsfiddle.net/PEgBv/

Answer 3

he puesto una respuesta con imagen dinámica lista de carga here. En lugar de una imagen indexada bajo z solo hay DIVs con las dimensiones de la imagen de fondo y la imagen establecidas.