当叠加在Img上时,使文本显示为具有半透明黑色背景的白色

时间:2011-08-04 02:01:28

标签: html css text image opacity

我有一个简单的CSS / HTMl问题。我在div中有一个图像和一些文本。我使用z-index将文本放在图像的顶部。

文字为白色,背景为黑色。我调整了文本的div的不透明度,以便下面的图像可见。看起来不错。

问题是文本显示为灰色而不是白色,因为不透明度降低了。如何让文字显示为白色,并且周围仍然有半透明的黑色背景?

 <style type="text/css">

        .wrap {
          position:relative;
          float:left;
          clear:none;
          overflow:hidden;
        }

        .wrap img {
          position:relative;
          z-index:1;
        }

        .wrap .desc {
          display:block;
      position:absolute;
      width:166px;
      top:20px;
      left:20px;
      z-index:2;
      color: #FFFFFF;
      padding: 10px;
      background-color: #000000;
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;

     /*For IE*/
      filter: alpha(opacity=60);
      opacity: 0.60;

        }
    </style>

    <div class="wrap">
        <img src="path/to/pic.png" />
        <h6 class="desc">This is my text about my image</h3>

    </div>

有什么建议吗?

4 个答案:

答案 0 :(得分:3)

这样怎么样:

CSS

.mod {
  position: relative;
  width: 80px;
  height: 100px;
  padding: 5px;
}
.mod-text,
.mod-background {
  position: absolute;
  left: 0;
  width: 100%;
}
.mod-text {
  color: #FFF;
  font-size: 1em;
  text-align: center;
  bottom: 0;
}
.mod-background {
  background-color: #f58322;
  border-radius: 8px;
  filter: alpha(opacity=60);
  opacity: 0.60;
  top: 0;
  height: 100%;
}

HTML

<div class="mod">
  <img src="http://www.gravatar.com/avatar/d543f6789b58df56f6fed95291e78261.png" />
  <div class="mod-background">
    &nbsp;
  </div>
  <div class="mod-text">
    Hawt!
  </div>
</div>

Plnkr

http://plnkr.co/edit/aSd9rO?p=preview

答案 1 :(得分:2)

根据您的浏览器支持要求,您可以将不透明度保持为100%并使用rgba颜色:

background-color: rgba(0,0,0,0.5);

颜色为红色,绿色,蓝色(每个0-255),然后是Alpha(0-1.0)。

如果您需要在旧版浏览器中使用后备版,通常可以使用:

background-color: #000;
background-color: rgba(0,0,0,0.5);

旧版浏览器默认为黑色,新版浏览器默认为半透明。它避免了额外的下载(平铺图像),以及在文本文件中保留更多样式(更易于版本,维护和查找)。

答案 2 :(得分:2)

我会在描述之前创建另一个具有相同高度和宽度的div,将div的不透明度设置为透明,添加背景,然后将描述放在另一个div中,不带背景。如果他们都有绝对的位置,那么后者应该优先于前者。

请在此处查看demo

答案 3 :(得分:1)

您可以在元素的背景中放置半透明图像。实际图像可能非常小,您可以重复它以覆盖整个背景。

.wrap .desc {
      display: block;
      position: absolute;
      width: 166px;
      top: 20px;
      left: 20px;
      z-index: 2;
      color: #FFFFFF;
      padding: 10px;
      background: url('my-small-bg.png');
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
}

以下是一个示例:http://jsfiddle.net/f6XS6/1/