Question

我为多个图像创建了一个css精灵图像。精灵的css是：

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

现在我想将此精灵中的第一个图像分配给li元素。目前，第一个图像是使用background：url属性分配的，如下所示：

li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)

如何从精灵中获取第一个图像并分配给li元素。我看过一个建议使用的例子：

<div class="sprites" id="image_5306605314403955_gif"></div>

但是我想看看是否可以避免添加HTML并仅为此目的使用CSS。我页面上的li元素如下所示：

<li><a href="http://www.xyz.com">ABC</a></li>

Answer 1

我不确定这是否是你要找的，但下面的代码应该这样做：

HTML：

<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>

CSS：

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

如果您要查找的内容不是class或id，那么我认为这是不可能的，因为您的CSS需要一个标识符来区分您的项目（继承自同一项目） class <li>）

Answer 2

body {
    overflow-y: scroll
}

.mini_iframe,
.serverfbml_iframe {
    overflow-y: visible
}

.auto_resize_iframe {
    height: auto;
    overflow: hidden
}

.pipe {
    color: gray;
    padding: 0 3px
}

#content {
    margin: 0;
    outline: none;
    padding: 0;
    width: auto
}

.profile #content,
.home #content,
.search #content {
    min-height: 600px
}

.UIStandardFrame_Container {
    margin: 0 auto;
    padding-top: 20px;
    width: 960px
}

.UIStandardFrame_Content {
    float: left;
    margin: 0;
    padding: 0;
    width: 760px
}

.UIStandardFrame_SidebarAds {
    float: right;
    margin: 0;
    padding: 0;
    width: 200px;
    word-wrap: break-word
}

.UIFullPage_Container {
    margin: 0 auto;
    padding: 20px 12px 0;
    width: 940px
}

.empty_message {
    background: #f5f6f7;
    font-size: 13px;
    line-height: 17px;
    padding: 20px 20px 50px;
    text-align: center
}

.see_all {
    text-align: right
}

.standard_status_element {
    visibility: hidden
}

.standard_status_element.async_saving {
    visibility: visible
}

img.tracking_pixel {
    height: 1px;
    position: absolute;
    visibility: hidden;
    width: 1px
}

使用没有html的css sprites

2 个答案: