web-dev-qa-db-fra.com

faire en sorte que l'ombre de la boîte de dialogue CSS apparaisse au-dessus des arrière-plans intérieurs

Je souhaite qu'un encadré CSS Box-Shad apparaisse au-dessus des éléments à l'intérieur du conteneur avec le Box-Shadow, en particulier les couleurs d'arrière-plan des éléments enfants.

Démo: http://jsfiddle.net/Q8n77/

<div class="parent">
    foo
    <div class="content">bar</div>
</div>

<style>
.parent {
    box-shadow : inset 0 0 5px 0 black;
}

.content {
    background : #EEE;
}
</style>

Des idées? Peut faire n'importe quoi avec le code HTML, mais doit pouvoir cliquer, c'est-à-dire qu'il n'y a pas de DIV à 100% largeur/hauteur au-dessus de tout.

csscss3
17
Mark Kahn

Si tout ce dont vous avez besoin est de faire apparaître l'ombre insérée à travers les couleurs d'arrière-plan, vous pouvez utiliser des couleurs transparentes rgba (ou hsla) plutôt que des codes hexadécimaux;

.parent {
    box-shadow: inset 0 0 5px 0 black;
}

.content {
    background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

Démo sur http://jsfiddle.net/Q8n77/7/

13
xec

Tout le monde n'a pas la capacité de changer la structure HTML. Si vous ne pouvez accéder qu'au CSS, vous pouvez essayer ce qui suit à partir de ce post: https://stackoverflow.com/a/13188894/491044

Alternativement, vous pouvez utiliser un pseudo élément:

HTML:

<div>
    a
</div>​

CSS:

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​
2
trgraglia

vous pouvez essayer de placer une division superposée au-dessus de votre parent avec la position: absolute; et donnez-y l'ombre (théorie non testée) avec quelque chose comme ceci:

HTML

<div class="parent">
    <div class="overlay"></div>
    foo
    <div class="content">bar</div>
</div>

CSS

.parent {  
    position: relative;
}

.content {
    background : #EEE;
}

.parent .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow : inset 0 0 5px 0 black;
}
1
xec

Une possibilité consiste à jouer avec la variable padding.

.parent {
    box-shadow : inset 0 0 5px 0 black; padding:.23em;
}

http://jsfiddle.net/jasongennaro/Q8n77/6/

1
Jason Gennaro

En ajoutant cette approche puisque c’est ainsi que j’ai résolu ma version de ce problème.

J'ajoute en gros a :: before ou un autre élément avec une ombre portée dans le parent, mais je le décale de manière à ce que seule la partie ombre soit affichée. Aussi je donne au parent un débordement: caché. De cette façon, le contenu devrait toujours être interactif. :)

Le kilométrage peut varier en fonction du balisage exact du parcours. Mais pensais que je devrais ajouter ceci ici.

codepen: http://codepen.io/mephysto/pen/bNPVVr

.parent {
  background:#FFF;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.parent::before{
  content:"";
  display:block;
  width:100%;
  height:25px;
  margin-top:-25px;
  box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}
0
Maurice