javascript - 如何将父 Div 的背景图像重叠在其子元素上

Question

我想将父 div 的背景图像覆盖在其子 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 fiddle ，基本上展示了我所拥有的: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;
}