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;
}

这是HTML代码，其中我使用2个div作为显示，其他用于计数：

<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;
}

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

在为此选择图像时，我需要考虑哪些特定尺寸？

Answer 1

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

EDIT :: 此外，您的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;

}

Answer 2

可能是因为SELECT u.id FROM User AS u JOIN Like AS li ON li.user_id = u.id WHERE li.photo_id = $current_photo_id中没有任何内容。尝试在其中放置一个空白字符div#cart。

&nbsp;

旁注：<div><div id="cart"> </div><p id="clickCount">0</p></div> <div id="click"> <input type="submit" onclick="myFunc()" value="Cart" /> </div>代码不需要结束标记。

Answer 3

我错过了为图片提供尺寸。

#cart{
    background-image: url("Cart.gif");
      background-size: 35px 40px;
    display:inline-block;
    height:35px;
    width:35px;
    }

Answer 4

如果图片尺寸为35px * 35px，请检查您的图片，

如果它比你的DIV＃cart div尺寸大，你必须为CSS添加背景定位属性。

我仅在下面的代码段中使用了您的代码，只使用了具有定位属性的Google图片精灵，它完全正常。

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

div#cart{
    background:url("https://www.google.com/images/nav_logo225.png") no-repeat right -35px ;

    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;
}

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

或者也可以查看fiddle。

感谢。

背景图像css不显示

4 个答案: