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

Image inside transparent background-color without being affected

本文关键字：颜色 不受影响 背景 透明 内部 图像      更新时间：2023-09-26

我想做的是在图像内部制作背景色（不透明度），有一种方法可以在不受背景色影响的情况下实现这一点吗？这里的问题是背景颜色不透明度，它使所有东西都透明，包括文本和图像。
这是我的代码：

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/

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

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

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

首先。您还需要删除父div上的不透明部分。这将影响所有子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;
相关文章：