带有更多图像的html css图像

【问题标题】：html css images with more image带有更多图像的html css图像
【发布时间】：2012-08-28 05:37:58
【问题描述】：

如果我有这样的图像（例如）：

_{（来源：tiscali.it）}

我的网站有更多背景元素，如何提取具有 css 属性的单个元素？

【问题讨论】：

【解决方案1】：

您应该使用“CSS Sprite”方法。这意味着你需要创建一个元素块宽度指定width和height，然后给它一个background-image以及background-position和backgorund-url，然后隐藏所有开箱即用的东西overflow:hidden;

例如参考本教程，那里有很好的解释：CSS Sprite link

【讨论】：

【解决方案2】：

使用 CSS 精灵
http://www.google.de/search?q=css+sprites

以您的图片为例 http://jsfiddle.net/qxVf8/

html

<div class="sprite sprite1">
</div>

css

.sprite {
    background: url(http://www.tiscali.it/v007/img/el.v004.png) 0 0 transparent;
}
.sprite1 {
    width: 79px;
    height: 28px;
    background-position: -0px -305px;
    border: 1px solid magenta;
}

【讨论】：

【解决方案3】：

您可以为此使用the css sprites technique。

【讨论】：