Question

我基本上想要在背景图像上叠加网页图案并减少网页图案的不透明度，因为我希望背景略微可见，现在我快速查看文档，揭示以下内容::

语法上是＆lt; number＆gt;。要应用的均匀不透明度设置跨越整个对象。任何超出0.0范围的值（完全透明）到1.0（完全不透明）将被夹到这个范围。如果对象是一个容器元素，那么效果就像是容器元素的内容与当前混合使用掩码的背景，其中掩码的每个像素的值是＆LT; 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>

现在不透明度实现了通过背景显示的目标，但当然，.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;
}

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

1 个答案: