背景图像CSS不显示

background image css not displaying

本文关键字：显示 CSS 图像 背景      更新时间：2023-09-26

下面是在购物车图像上显示若干项的代码。

背景图片没有显示。

样式表: 

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代码，我使用2div一个显示和其他计数:

<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文档与主体等…

是否有任何特定的尺寸，我需要考虑，而选择这个图像?

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

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

下面是使用购物车

占位符图像的示例
#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;

}

这可能是因为div#cart中没有任何内容。试着在里面放一个空白字符&nbsp;。

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

旁注:<input>标签不需要结束标签

我没有给出图片的尺寸。

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

请检查图片尺寸是否为35px*35px

如果它大于DIV的尺寸，你必须添加背景定位属性到CSS。

我已经使用你的代码只在下面的片段与谷歌图像精灵与定位属性，它的工作非常好。

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>

或者也可以检查这个小提琴

谢谢。

相关文章：