html - 具有半透明背景而不影响其包含元素

Question

我主要是想在背景图像上叠加网页图案并降低网页图案的不透明度，因为我希望背景稍微可见，现在我快速查看文档，发现以下内容::

Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>. W3C

现在我有以下代码:

CSS 和 HTML::

html,body {
  height: 100%;
}
.wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  background: url(http://www.zastavki.com/pictures/1920x1200/2011/Space_Huge_explosion_031412_.jpg) no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
}
.wrapper * {
  width: 100%;
  height: 100%;
}
.dell {
  display: table-cell;
  vertical-align: middle;
  background: url(http://image.clipdealer.com/1140524/previews/18--1140524-Electronic%20dots%20Background,particle,mosaics,puzzle,tech%20communication,web%20enery,disco%20neon,game,grid,weaving,textile,pattern,symbol,vision,idea,creativity,vj,beautiful,art,decorative,mind,Geometry,mathematics,computing,graphics,fun,Game,Led,neon%20lights,mo.jpg);
  opacity: 0;
}
.orange {
  margin-right: auto;
  margin-left: auto;
  background: orange;
  height: 200px;
  width: 200px;
}	

<div class="wrapper">
  <div class="dell">
    <div class="orange">
    </div>
  </div>
</div>	

现在opacity实现了背景显示的目的，当然.dell的内容也变半透明了，现在有没有办法实现背景显示没有 .dell 的内容变得半透明？

我最好不要将要合并的背景和半透明图案链接在一起。

FIDDLE HERE

Answer 1

请查看:http://jsfiddle.net/7xo353hg/8/

.dell:after{
    width:200px;
    content:'';
    height:200px;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-100px;
    background:orange;
    opacity: .5;
    z-index:0;
    display:block;
}