Problèmes avec CSS Box-Shadow: Inset on image

Je suis en train de reproduire le CSS 'Vignette' effet, détaillées sur Trent Walton 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;
}

Il fonctionne bien dans l'isolement, mais a des problèmes sur mon site de production, où les paramètres d'arrière-plan pour un div parent remplacer le z-index sur l'image - live jsFiddle démo ici.

La deuxième approche - mentionné dans l'article original et les commentaires et inclus dans la démo fonctionne bien, mais mon image doit être enveloppé dans la balise - il ne peut pas être en dessous.

source d'informationauteur Jon Hadley

  1. 8

    page a un fond blanc, vous donnez l'image d'un z-index de 1, donc il va en dessous de ce div. Il existe plusieurs solutions, en fonction de la façon dont votre dessin final est d'aller le chercher, mais si vous venez de faire #page transparente cela fonctionne:

    http://jsfiddle.net/tA8EA/

    Ou vous pouvez également définir la page à la position realtive et de lui donner une plus faible z-index de l'image:
    http://jsfiddle.net/PEgBv/

  2. 5

    En fin de compte j'ai trouvé la "Superposition & en Médaillon de la Méthode", la deuxième de Jordon Dobsons techniques pour être la plus efficace et la moins tributaire de l'négatif de 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 démo à l'aide de la disposition d'origine)

  3. 0

    J'ai poster une réponse avec l'image dynamique de la liste de chargement ici. Au lieu de sous-z-image indexée, il y a juste les DIVs avec background-image et de l'image dimensions.