防止透明div内的图像透明答案

【问题标题】：Prevent image transparent inside a transparent div防止透明div内的图像透明
【发布时间】：2015-01-27 11:33:51
【问题描述】：

你可以在这张图片上看到我的问题：

如你所见，div 是透明的，它影响了里面的图像。这是我的 html 代码：

<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
    <div class="cnvptr">
        <img src="uploadfabrics/14606171783156.jpg" >
    </div>
    <div class="cnvptr">
        <img src="uploadfabrics/16292373497271.jpg" ></div>
    </div>

这些是css代码：

#cselect {
    padding: 15px;
    width: 90%;
    padding: 2%;
    background: black;
    opacity: 0.5;
    position: relative;
}
.cnvptr {
    background: black;
    opacity: 1 !important;
    width: auto;
    display: inline-block;
}

我在每个带有cnvptr 类的图像周围放置了一个 div，它有黑色背景，但它不起作用。

如何让图片背景不透明？

谢谢

【问题讨论】：

删除opacity: 0.5 ...?
你能把它放在一个codepen/fiddle中，这样我们就可以很容易地看到和测试你的问题吗？

标签： javascript jquery html css

【解决方案1】：

您可以改用 rgba：

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

#cselect {
  padding: 15px;
  width: 90%;
  padding: 2%;
  background: black;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
.cnvptr {
  background: black;
  opacity: 1 !important;
  width: auto;
  display: inline-block;
}

<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
</div>

使用不透明度的相同代码：

#cselect {
  padding: 15px;
  width: 90%;
  padding: 2%;
  background: black;
  position: relative;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  opacity: 0.5;
}
.cnvptr {
  background: black;
  opacity: 1 !important;
  width: auto;
  display: inline-block;
}

<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
</div>

【讨论】：

【解决方案2】：

改用 rgba 背景色，不要改变 div 的不透明度。

 #cselect {
    background:rgba(0,0,0,.5);
    opacity:1;
 }

【讨论】：

我的回答有什么不同？
我回答时您的答案尚未发布：P
一分钟后但没问题;)

【解决方案3】：

注意rgba(0,0,0,.5);会有兼容性问题。

检查RGBa Browser Support。

另一种解决方案可以是： 在您的情况下，这将不起作用，您必须更改您的 HTML 结构，即让您的内部 div 不在 id="cselect" 之外。

HTML

<div id="parent">
    <h2>Hello World!</h2>
    <div class=”tp-bg”></div>
</div>

CSS

.tp-bg
{
    background: #000;
    height: 80px;
    width: 100%;
    opacity: 0.3;
}

这是另一个关于修复 CSS Opacity issue on child div 的博客。

【讨论】：