图像内部透明背景色，不受影响

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);

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

Answer 2

第一。 您还希望删除父div上的反对。 这将影响所有子div。 这就是为什么图像div上的BG颜色会受到影响的原因。

    div.trans-bg {
  background-color: #646464;
  opacity: 0.5;
  border-radius: 3px;
  border: 2px ridge #7AC3D1;
  position: absolute;
  }

接下来，您将要使用background-color设置颜色而不影响image div上的image BG css。

background-color: #000;