防止透明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;
}

我用类在每个图像周围放置一个div cnvptr,它有黑色背景但它不起作用.

如何使图像背景不透明？

谢谢

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>