Question

我希望通过其父级div元素实现阴影iframe元素的效果。

HTML

<div> <iframe width="560" height="315" src="//www.youtube.com/embed/zdOmNiXvM3w?rel=0" frameborder="0" allowfullscreen></iframe> </div>

CSS

div {
    box-shadow: 
    inset 0px 11px 8px -10px black,
    inset 0px -11px 8px -10px black;
}

以上是我到目前为止所获得的内容，但无论在CSS中使用z-index，iframe似乎都具有优先权。我在此示例中使用了Youtube iframe，但此解决方案还需要使用标准iframe，例如google。理想情况下只使用CSS / HTML。

Answer 1

iframe将始终位于其父级的box-shadow之上。要解决此问题，您可以将box-shadow分配给绝对位于父元素内的伪元素，并使其对指针事件无响应：

div {
    position: relative;
}
div iframe {
    display: block;
    position: relative;
    z-index: 1;
}
div::before {
    background-color: rgba(255,255,255,.5); // Added only to show overlay, can be removed
    content: '';
    position: absolute;
    z-index: 2;
    box-shadow: inset 0px 11px 8px -10px black, inset 0px -11px 8px -10px black;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

我添加了略微透明的白色背景以显示叠加层。您可以随时将其删除。请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/uva5zkrg/

CSS：通过在iframe上显示div来嵌入阴影

1 个答案: