CSS：嵌入阴影通过父母div div iframe [英] CSS: Inset shadow by parenting div over iframe

问题描述

$ b

HTML

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

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


CSS

  div {
 box-shadow：
 inset 0px 11px 8px -10px black，
 inset 0px -11px 8px -10px black; 
} 
  

以上是我目前为止的内容，但iframe似乎无论在CSS中使用z-index，都要优先考虑。
在这个例子中，我使用了Youtube iframe，但是这个解决方案也需要使用标准的iframe，比如google。
理想情况下仅使用CSS / HTML。

解决方案

iframe将始终位于其父级的box-shadow之上。为了解决这个问题，你可以将box-shadow赋值给绝对位于父元素中的伪元素，并使其对指针事件无响应：

  div {
 position：relative; 
} 
 div iframe {
 display：block; 
职位：亲属; 
 z-index：1; 
} 
 div :: before {
 background-color：rgba（255,255,255，.5）; //仅用于显示叠加层，可以删除
内容：''; 
位置：绝对; 
 z-index：2; 
 box-shadow：inset 0px 11px 8px -10px black，inset 0px -11px 8px -10px black; 
 top：0; 
 right：0; 
 bottom：0; 
剩下：0; 
 pointer-events：none; 
} 
  

我已添加稍微透明的白色背景以显示叠加层。你可以随时删除它。在这里看到概念验证小提琴： http://jsfiddle.net/teddyrised/uva5zkrg/

I'd like to achieve an effect of a shadowed iframe element by its parenting div element.

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;
}

The above is what I've got so far, but the iframe appears to take priority regardless of using z-index in CSS. I've used a Youtube iframe in this example, but this solution also needs to work with standard iframes, such as one to google. Ideally using only CSS/HTML.

解决方案

The iframe will always be above the box-shadow of its parent. To counter this issue, you can assign the box-shadow to a pseudo-element positioned absolutely within the parent element, and make it non-responsive to pointer events:

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;
}

I've added the slightly transparent white background to show the overlay. You can always remove it. See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/uva5zkrg/

这篇关于CSS：嵌入阴影通过父母div div iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！