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

Question

我基本上想在背景图像上叠加一个 web 图案并降低 web 图案的不透明度，因为我希望背景稍微可见，现在我快速查看文档，显示以下内容 ::

语法上是一个。要应用的统一不透明度设置 横跨整个对象。范围 0.0 之外的任何值（完全 透明）到 1.0（完全不透明）将被限制在这个范围内。如果 对象是一个容器元素，那么效果就好像 容器元素的内容与当前混合 使用掩码的背景，其中掩码的每个像素的值是 。 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 的内容也变成了半透明的，现在有没有解决方案，我可以在没有@ 的内容的情况下通过背景显示987654326@变得半透明？

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

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