在 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 崩溃...意味着它没有高度，因此没有背景。 试试这个... #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>