javascript - 透明背景颜色内的图像不受影响

Question

我想做的是在图像中制作背景颜色(不透明)，有一种方法可以实现这一点而不受背景颜色的影响吗？这里的问题是不透明的背景颜色，它使一切透明，包括文本和图像。
这是我的代码:

CSS

div.Image {
  background: url("http://fc07.deviantart.net/fs43/i/2009/141/e/e/Vista_orb_by_fediaFedia.png")center center no-repeat;
  background-size: 40px 40px;
  position: relative;
  background-position: 50% 0px;
}
div.trans-bg {
  background-color: #646464;
  opacity: 0.5;
  border-radius: 3px;
  border: 2px ridge #7AC3D1;
  position: absolute;
}
div.trans-bg p {
  text-shadow: 1px 2px 2px #000;
  margin: 5%;
  padding-top: 45px;
  width: 100px;
  color: #fff;
  text-align: center;
}

<div class="trans-bg">
  <div class="Image">
    <p>Windows 7</p>
  </div>
</div>

http://jsfiddle.net/c3ja7rjn/

Answer 1

尝试使用 rgba 而不是不透明度。

background-color: rgba(100, 100, 100, 0.29);

不透明度会改变 block 级元素中包含的所有内容，而使用 RGBA 设置不透明度会改变元素本身的不透明度。