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

Posted 2023-03-06

【中文标题】用另一个 div 填充一个 div [重复]

【英文标题】：filling a div with another div [duplicate]

【发布时间】：2013-03-03 00:48:33

【问题描述】：

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

【问题讨论】：

您是否尝试将文本的不透明度设为 1？

是的，我在该 div 中创建了一个不透明度为 1 的新 div，但它没有改变任何内容，您对我将如何执行此操作有其他建议吗？

***.com/questions/637921/…

【参考方案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

【参考方案2】：

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

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

【讨论】：

我知道不透明度会影响整个元素，这就是为什么我想让半透明的 div 填充另一个 div，并在另一个 div 后面留下一段时间的文字

【参考方案3】：

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

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

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

【讨论】：

谢谢，但我想我用我的方法让它工作了......我也更喜欢使用更少的图像，因为这样浏览器需要下载的东西就少了！谢谢