2

我为多个图像创建了一个 css sprite 图像。精灵的 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 元素。目前，第一张图片是使用这个 li 的 background:url 属性分配的：

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

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

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

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

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

2 回答 2

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

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

于 2012-11-04T11:26:24.993 回答
0 
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
}
于 2020-06-25T00:02:38.097 回答