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

时间:2015-03-18 20:15:38

标签: javascript jquery html css

我想要做的是在图像中制作背景颜色(具有不透明度),我可以在不受背景颜色影响的情况下实现此目的吗?这里的问题是背景颜色与不透明度,它使一切都透明,包括文本和图像。
这是我的代码:

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>
&#13;
&#13;
&#13;

http://jsfiddle.net/c3ja7rjn/

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

首先。你还想删除父div上的opactity。这将影响所有儿童div。这就是图像div上的BG颜色受到影响的原因。

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

接下来,您需要使用背景颜色来设置颜色,而不会影响图像div上的图像BG css。

background-color: #000;