javascript - 背景图片CSS不显示

Question

下面是在购物车图像上显示多个元素的代码。

背景图像未显示。

样式表:

div#cart{
    background:url("Cart.gif") no-repeat;

    display:inline-block;
    height:35px;
    width:35px;
    }
#clickCount{ 
    float:left;
    right:-50px;
    top:-15px;
    position:relative;
    background:lightblue;
    border-radius:80px;
    border:1px solid grey;
    height:20px;
    width:20px;
    text-align:center;
}

这是我使用 2 个 div 的 HTML 代码，一个用于显示，另一个用于计数:

<code>
<div><div id="cart"></div><p id="clickCount">0</p></div>
<div id="click">
  <input type="submit"  onclick="myFunc()" value="Cart"> 
    </input>
</code>

下面是javascript:

function myFunc(){
    var val=document.getElementById("clickCount").innerHTML;    document.getElementById("clickCount").innerHTML=Number.parseInt(val)+1;
}

这是我的代码的一部分。该网址有效。我的 HTML 只是一个带有正文等的常规 HTML 文档...

为此选择图像时，我需要考虑任何特定尺寸吗？

Answer 1

在你的 CSS 中删除 #cart 代码前面的 div 文本然后应该是 #cart{

编辑: 此外，您的 Cart.gif 必须为 35px x 35px 或更小，因为您在 Css 中设置了该尺寸。如果它比这个大，你只能看到图像的左上角，这可能是空白区域

这里是 example为购物车使用占位符图像

#cart{
background:url("https://placeholdit.imgix.net/~text?txtsize=8&txt=cart&w=35&h=35") no-repeat;

display:inline-block;
height:35px;
width:35px;
}
#clickCount{ 
float:left;
right:-50px;
top:-15px;
position:relative;
background:lightblue;
border-radius:80px;
border:1px solid grey;
height:20px;
width:20px;
text-align:center;