Question

我是新来的，只是学习编写一个网站，到目前为止我遇到了麻烦。当我尝试使用我的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

如果有人能提供帮助，请非常感谢。我一直试图解决这个问题几个小时......

Answer 1

在CSS中，使用background: ...代替background-image: ...。

Answer 2

<强>演示

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

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

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

或者只是按照DXL的说法更新background-image

我的css精灵根本没有露面，我已经尝试了一切

2 个答案: