0

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

大家好！我确实有一个.png 图像，其中包含几个用作CSS Sprite的图标。为此创建每个 CSS 类都没有问题，因为我为此使用了生成器。（像魅力一样工作） 问题是，我想使用，例如：创建的类，作为另一个css 类的属性。

.iconInfo_32background

我想达到什么目标？

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

我有的

图标

图标（那是一个PNG）

我想使用的图标

图标

结果应该如何

正确的

它实际上看起来如何

正确的

在一个 div 中使用另一个 div

是的，那会起作用-但我希望有“一个”css类，而不需要总是将一个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>

>> 下载为 RAR。<<

4

1 回答 1

2

这是因为您已将其设置为整个<div>元素的背景图像，并且因为精灵包含多个图像，它将全部显示。您无法指定要显示多少该精灵。

您必须将一个<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; 
}

在此处查看演示

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

于 2013-07-25T16:39:40.790 回答