用另一个 div 填充一个 div [重复]

Question

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

我的问题是，当我将文本放入 tint div 时，字体继承了不透明度，并以灰色而不是白色结束，但是当我将其放在 tint 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;
}

=> Simplified and updated jsFiddle

Answer 2

不透明度会影响整个元素。 您可以使用 rgba 作为背景：

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

Answer 3

我处理这类问题已经够久了，主要是因为有时我喜欢使用半不透明的 div 背景，但又不想让文字部分透明，我认为我们遇到的问题是相似的。

根据经验，我会告诉您只需生成一些具有所需透明度的 10x10 像素 png，并将它们用作这些 div 的背景。会解决你很多头疼的问题。您可能遇到的唯一问题是我认为 IE6 及以下版本不支持 png，但是有一个 js 库可以解决这个问题。

大多数攻击位置和东西的方法可能最终无法跨浏览器工作，并使您的代码修改变得非常讨厌。