用另一个div填充div

Question

我正在建立一个由一堆面板组成的网站.这些面板都具有重复纹理,但为了使网站看起来更好,我决定使用彩色div和不透明度着色图像.我宁愿不使用更多图片,所以请不要建议我重新着色图像.

我的问题是,当我将文本放入色调div时,字体继承了不透明度,最终变为灰色而不是白色,但当我把它放在色调div之外时,我松开了色调.

.tint {
  display: block;
  position: static;
  height: 100%;
  width: 100%;
  line-height: 100%;
  opacity: 0.4;
  z-index: -1;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}
.ExpDiv {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  border: solid 3px;
  -webkit-transition: all .5s ease-in-out 0.2s;
  -moz-transition: all .5s ease-in-out 0.2s;
  -ms-transition: all .5s ease-in-out 0.2s;
  -o-transition: all .5s ease-in-out 0.2s;
  transition: all .5s ease-in-out 0.2s;
  background-color: #99ccff;
  min-width: 7px;
  min-height: 9px;
  max-width: 150px;
  max-height: 200px;
  overflow: hidden;
  background-image: url(striped_linenen.png);
  background-repeat: repeat;
  float: left;
}

<div class="ExpDiv" style="float:left;">
  <div class="tint" style="background: #99CCFF; ">
    Content For these Divs will be inserted by the Owner...
  </div>
</div>
<div class="divider">
  <br />
</div>
<div class="ExpDiv" style="float:left;">
  <div class="tint" style="background: #996699; "></div>
  Content For these Divs will be inserted by the Owner...
</div>

Answer 1

由于不透明度影响整个块，您可以使用两个不同的div。一个用于色调，另一个用于内容。将它们都放在absolute适当的位置：

HTML

<div class="ExpDiv" style="float:left;">
    <div class="tint" style="background: #ff0000; "></div>
    <div class="content">Content For these Divs will be inserted by the Owner...</div>
</div>

CSS

.tint {
    position:absolute;
    height:100%;
    width:100%;
    opacity:0.4;
    z-index:1;
    filter:alpha(opacity=40);
}
.content {
    position:absolute;
    height:100%;
    width:100%;
    z-index: 99;
}
.ExpDiv {    
    position: relative;
    width: 150px;
    height: 200px;
}

=> 简化和更新的 jsFiddle

Answer 2

不透明度影响整个元素.你可以使用rgba作为你的背景:

background: rgba(153, 204, 255, 0.4); /* #99CCFF */
background: rgba(153, 103, 153, 0.4); /* #996699 */