抱歉,如果问题的布局看起来很奇怪,我已经在这个编辑器中一遍又一遍地写了大约 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>
最佳答案
这是因为你已经将它设置为整个<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,并且顶部、左侧、高度和宽度属性必须根据您的要求进行内联更改
关于html - 如何将 css sprite 定位为另一个类的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17862908/