在 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

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

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>

在 div 中设置背景颜色无效

Setting background-color in div is not working

html

javascript

css

background-color