3

我正在制作一个网站，它由一堆面板组成。这些面板都有重复的纹理，但为了让网站看起来更好，我决定使用彩色 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>

4

3 回答 3

6

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

于 2013-03-14T15:34:19.907 回答
5

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

background: rgba(153, 204, 255, 0.4); /* #99CCFF */
background: rgba(153, 103, 153, 0.4); /* #996699 */
于 2013-03-14T15:26:46.370 回答
1

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

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

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

于 2013-03-14T15:38:07.120 回答