在 div 中设置背景颜色不起作用

Question

我在这里有点问题。我正在尝试设置<div id='coupons'> 的背景颜色，但是当我这样做时，什么都没有发生！请帮我解决这个问题。我留下了大部分 CSS，因为我没有任何冲突的背景颜色标签。

#coupons {
  background-color: black;
}

<div id='coupons'>
  <a id="coupons" name='coupons'>
    <div style="float:left">
      <img id='myImg' src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
      <div id="myModal" class="modal">
        <span class="close">×
    		  </span>
        <img class="modal-content" id="img01">
        <div id="caption">
        </div>
        <script>
          // Get the modal
          var modal = document.getElementById('myModal');
          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var img = document.getElementById('myImg');
          var modalImg = document.getElementById("img01");
          img.onclick = function() {
            modal.style.display = "block";
            modalImg.src = this.src;
          }
          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          // When the user clicks on <span> (x), close the modal
          span.onclick = function() {
            modal.style.display = "none";
          }
        </script>
      </div>
    </div>
    <div id='pformat'>
      <p>COUPONS FOR YOU!
      </p>
    </div>
  </a>
</div>

Answer 1

#coupon 中的 div 是浮动的，这意味着 #coupons colappses... 意味着它没有高度，因此没有背景。试试这个... #coupons:after { content: "";显示：表格；明确：两者； } 来清除它的浮动子节点。

Answer 2

您的 .png 似乎不透明。图像本身具有白色背景。

ID #coupons 被多次使用，也许这会产生不想要的结果。

Answer 3

正如@Barmar 所说，我可以看到图像后面的黑色，所以我假设您正在寻找jQuery 解决方案。

[此外，@Joe B. 对你的 png 的透明度提出了一个有效的观点]

如果您尝试使用jQuery 更改背景颜色，您可以使用.css()：

$('#coupons').css(`background-color`, 'pink');

#coupons {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupons">I am a coupons</div>