我的css精灵根本没有出现，我已经尝试了一切答案

【问题标题】：My css sprites are not showing up at all, I have tried everything我的css精灵根本没有出现，我已经尝试了一切
【发布时间】：2026-02-03 07:15:01
【问题描述】：

我是新来的，刚刚学习编写网站代码，到目前为止我遇到了障碍。当我尝试使用我的background: url(../images/sprite.png) 时，它似乎不起作用，我让它在我的导航栏上工作，但是当我尝试在我的广告牌部分区域上做它时，它根本不想和我一起工作。这是我的 HTML

<div id="container_header">

<div id="container_header2">

<div id="ram_logo">
    <a href="#">
        <img src="images/ram_logo.png" border="0" alt="logo" />
    </a>
</div>

<div id="menu">
    <ul>
        <li id="features"><a href="#"><span>Features & Specs</span></a></li>
        <li id="photos"><a href="#"><span>Photo Gallery</span></a></li>
        <li id="brochure"><a href="#"><span>Brochure</span></a></li>
        <li id="getaquote"><a href="#"><span>Get A Quote</span></a></li>
    </ul>
</div>

<div class="clear">

</div>
</div>
</div>

<div id="container_billboard">

<div id="truck_home">

</div>

<div id="billboard_title">
    <p id="title_allnew">THE ALL NEW</p>
    <p id="title_ram">2013 Ram 1500</p>
    <p id="title_laramie">Laramie Longhorn </p>    
    <p id="title_starting">Starting at</p>
    <p id="title_price">$20,500</p>
    <div class="clear"></div>
    <div id="title_getaquote">
        <a href="#">
        </a>
    </div>
</div>

<div class="clear">
</div>
</div>

现在我要定位的元素是：<div id="truck_home"> 和 <div id="title_getaquote"> <a href="#"> </a> </div>

这是我的 CSS：

#truck_home {
    background-image: url(/images/sprite.png) no-repeat 0px -69px;
    margin-top: -20px;
    margin-right: -150px;
    float: right;
    height: 293px;
    width: 655px;

    }
#title_getaquote {
    background-image: url(/images/sprite.png) no-repeat -163px -365px;
    text-align: left;
    margin-top: 20px;
    margin-left: 165px;
    }

所以我不确定我在这里做错了什么，我尝试做background-position: 0 0

如果有人可以提供帮助，我们将不胜感激。我已经尝试了几个小时来解决这个问题......

【问题讨论】：

标签： html css sprite

【解决方案1】：

在您的 CSS 中，使用 background: ... 而不是 background-image: ...。

【讨论】：

【解决方案2】：

演示

http://jsfiddle.net/raunakkathuria/MA8pN/

如果您使用背景图片，请不要在其中包含no-repeat -163px -365px，因为background-image 仅用于指定url，在这种情况下您必须单独指定

background-repeat: no-repeat
background-position:-163px -365px;

或者只更新background-image，正如 DXL 所说的那样

【讨论】：