防止透明div内的图像透明

Question

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

正如你所看到的，div是透明的，它影响了它里面的img es。 这是我的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，它有黑色背景但它不起作用。

如何使图像背景不透明？

谢谢

Answer 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>

Answer 2

请改用rgba背景色，而不要更改div的不透明度。

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

Answer 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的博客。