如何在其子女上覆盖父Div的背景图像

Question

我希望将父div的背景图像覆盖在其子项的内容上。

我本质上很简单：

<div> <!-- has BGImage -->
  <div>
    <div>
      <iframe /> <!-- serves content that needs to be interacted with -->
    </div>
  </div>
</div>

顶级父div具有背景图像（ipad的轮廓），iframe中的内容是提供JQuery Mobile内容的页面（它是移动预览）。我不能使用z-index进行绝对定位的另一个父div，因为iframe中的内容必须保持完全可用且可点击。

我需要这个的原因是平板电脑轮廓的内边缘有一个透明的内边框，我需要这个来柔化所服务的iframe内容的边缘。

我希望这是可以实现的，我把JavaScript和JQuery标签放在问题中，因为我不羞于使用它们，但是一如既往，如果我能用CSS完成这个，那么我就是为了这一切。

模拟JS小提琴基本上显示我的内容：http://jsfiddle.net/fQ22A/1/

以下图片是基于上面的JSFiddle我想去的地方：

Answer 1

不是你想要的方式，但你的目的在这里得到解决。 http://jsfiddle.net/fQ22A/5/

全屏：http://jsfiddle.net/fQ22A/5/embedded/result/

HTML：

<div id="finalCont2">
  <div id="insidewrapper2">
    <div id="outsidewrapper2">
      <div class="fullheight2">
        <iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe> 
      </div>
    </div>
  </div>
</div>

CSS：

#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
   padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
    display:block;
    border:none;
    margin:0 auto;
}

Answer 2

你做不到。

...但你可以使用盒子阴影内部得到接近我猜你想要的东西。

编辑：

body{border:none;box-shadow: inset 0 0 10px #000;}

http://jsfiddle.net/rwA2f/1/

Answer 3

这可能更接近你实际的目标：

演示：http://jsfiddle.net/abhitalks/ZVEug/2/

全屏：http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/

您需要使用定位将iframe放置在div中。这是一个简单的标记，可以提供您的想法：

HTML ：

<div class="outer"> 
    <iframe src="..." /> 
</div>

CSS ：

div.outer {
    width: 320px;
    height: 320px;
    background: url('...') no-repeat top left;
    background-size: 100%;
    position: relative;
}

iframe {
    border: none;
    width: 250px;
    height: 220px;
    position: absolute; 
    top: 48px; left: 32px;
    border-radius: 10px;
    box-shadow: 0 0 30px #fff;
    opacity: 0.6; 
}

诀窍是使用box-shadow与opacity的组合来提供柔和边缘的幻觉，并且在iframe内容可用的同时满足您对背景的窥视要求。< / p>

请注意iframe内容如何显示背景的反射（斜玻璃反射）。