html - DIV透明度与继承CSS DIV背景有图像，DIV外层为白色背景，DIV内层为透明窗口

Question

参见 http://jsfiddle.net/mshaffer/g9q0p0nk/2/

CSS

div#bg {
  background-image: url(http://static4.grsites.com/archive/textures/red/red001.jpg);
  width: 200px;
  height: 200px;
}

div#outer {
  background-color: white;
  position: relative;
  width: 200px;
  height: 200px;
}


div#inner {
  background-color: transparent;
  position: absolute;
  top: 30px;
  left: 40px;
  width: 110px;
  height: 90px;
  border: solid 2px yellow;
  color: yellow;
}

HTML

<div id="bg">
<div id="outer">
<div id="inner">
</div>
</div>
</div>

这是一个 hack，从另一个问题派生而来。

div#bg 有一张图片

div#outer 具有白色背景(例如模态)

div#inner 背景透明，边框黄色。

有了透明度，我想看到背景图像覆盖上一层的白色......

我猜白色可能是使用 jquery 作为伪层生成的边框。不过，我希望有一个 CSS3 解决方案。

Answer 1

白色的 div 必须是透明的。有一个非常大的白色框阴影是最简单的:

http://jsfiddle.net/g9q0p0nk/5/

div#bg {
    position: absolute;
    background-image: url("http://static4.grsites.com/archive/textures/red/red001.jpg");
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div#outer {
    box-shadow: 0 0 0 3000px rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 28px;
    left: 38px;
    width: 110px;
    height: 90px;
    background-color: transparent;
}

div#inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: solid 2px yellow;
    color: yellow;
}

<div id="bg">
    <div id="outer">
      <div id="inner">
      </div>
    </div>
</div>