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

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

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

Answer 2

由于不透明度会影响整个块，因此您可以使用两个不同的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 3

我一直在处理这类问题，主要是因为有时候我喜欢使用半透明的div背景，但是不希望文本部分透明，我认为我们遇到的问题是相似的。

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

大多数黑客攻击这些职位和东西可能最终无法跨浏览器工作并且使代码的修改变得非常糟糕。

用另一个div填充div

3 个答案: