html - 如何将 css sprite 定位为另一个类的背景

Question

抱歉，如果问题的布局看起来很奇怪，我已经在这个编辑器中一遍又一遍地写了大约 10 次这个问题，结果总是收到错误消息“找到未格式化的代码等”。 - 所以我删除了所有代码并放置了图片示例。 (一个简单的问题2小时)

---

大家好!我确实有一个 .png 图像，其中包含几个图标，用作CSS Sprite。为此创建每个 CSS 类都没有问题，因为我为此使用了生成器。 (很有魅力)

问题是，我想使用，例如:创建的 .iconInfo_32 类，作为 另一个 css 类的 background 属性。

我想达到什么目的？

简单地说，一个自定义的 css - 消息框，左侧有一个图标。图标本身是一个包含多个图标的原始 Sprite 。这就是问题开始的地方。

我有什么

图标

(那是一个 PNG)

我要使用的图标

结果应该是怎样的

实际看起来如何

在一个div中使用另一个div

是的，那行得通——但我想有“一个”css类，而不需要总是把一个div放到另一个div中，说出位置应该在哪里等等——我也有问题div 的位置。

我提供了一个源代码示例，希望这有助于理解我的问题和我的目标。对不起，如果我的问题布局不寻常且令人不愉快，我会用另一种方式来做，但编辑就是不让我

来源

HTML

<div class="warning_without_sprite">
    This is a DIV container<br />
    showing an error message with the use of 'close_32.png' as Icon. (No Sprite)
</div><br /><br /><br /><br />
<div class="warning_with_sprite">
    This is a DIV container<br />
    showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>

CSS

<style type="text/css">
  .iconInfo_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -0px -0px; }
  .iconOk_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -32px -0px; }
  .iconAdd_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -64px -0px; }
  .iconClose_2_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -96px -0px; }
  .iconClose_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -128px -0px; }
  .iconDelete_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -160px -0px; }
  .iconDownload_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -192px -0px; }
  .iconHelp_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -224px -0px; }

.warning_without_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/close_32.png');
}
.warning_with_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background: #FFBABA url('images/icons.png') no-repeat -128px -0px;
}
</style>

>> Download as RAR. <<

Answer 1

这是因为你已经将它设置为整个<div> 的背景图像元素，因为 Sprite 包含多个图像，它将全部显示出来。您无法指定要显示多少 Sprite 。

您必须插入一个 <span>元素到你的<div> .这将允许您指定跨度的大小并将其相对于您的 div 容器定位。

<div class="warning">
    <span class="warning_with_sprite"></span>
    This is a DIV container<br />
    showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>

CSS:

.warning_with_sprite {
    position:absolute; left:16px; top:16px;
    background-repeat: no-repeat;
    background-position: 10px center;
    width:20px; height:20px; 
    background: url('http://i5.minus.com/id1CYq.png') no-repeat -133px -2px;
}
.warning { 
    float:left;
    color: #D8000C;
    border: 1px solid;
    position:relative;
    padding: 10px 10px 10px 50px; 
    background: #FFBABA; 
}

观看演示 ​​here

注意:您必须将图像改回您的 sprite，并且顶部、左侧、高度和宽度属性必须根据您的要求进行内联更改