标签: css-sprites

我在一些网站上注意到的一件事是他们使用一个包含大量小图像的BIIIIIIIG图像,然后使用CSS background-position来定义每个图像的坐标,而不是使用单个图像.

这是我在的地方:

使用大精灵表的缺点

• 需要加载大图像才能显示一个小图像
• 需要为每个图像编写(或生成)带有类的长样式表
• 使用大量类定义来混乱CSS可能会影响性能
• 如果一个图像发生更改(或添加了另一个图像),则可能会在图像和与之关联的CSS上遇到缓存问题
• 需要一个<div>合适的样式(display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');),它可以添加另一个类.
• 现在我记不起更多了,我正在打字.

使用大精灵表的优点

• ......呃......还没有.

事实上,这里唯一接近专业人士的是,当我将表单切割成单个图像时,生成的文件夹占用磁盘上的3Mb (由于每个文件<100字节,我的分配大小为4k).实际文件本身的大小不到表和CSS的一半,因此即使有HTTP请求的开销,也可以节省大量空间.

基本上,我的问题是:有没有人有任何专业人士使用大表单对单个图像？

在构建网页时,我的一位同事使用CSS background-image属性显示任何徽标,而不是使用HTML <img>标记嵌入图像.该同事报告说它是为了减少HTTP请求的数量.他还向我展示了一个图片精灵,并说谷歌用精灵图像显示其徽标.

我不同意他的做法,并向他展示主Google.com页面在<img>标签中加载他们的徽标.

哪个是更好的做法？

编辑: Facebook也在他们的主页上做同样的事情,在img标签中加载徽标,而在他们的个人资料页面上,他们使用CSS精灵显示他们的徽标.

由此我的结论是,也许您应该将主徽标加载到img标记中,而对于其他徽标(例如页脚或子页面),您可能希望使用CSS sprites在后台加载它们.

更新:我经常用img标签加载徽标,也知道为什么我们可能会使用sprite.我的主要问题是:如果页面上有三个或更多徽标,那么加载它们的更好方法是什么？

在最近的趋势中,我看到人们使用JavaScript而不是使用动画GIF动画CSS精灵？

例如:

• http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday(事实上​​,谷歌也在其他涂鸦中使用过这种技术)
• https://everyme.com/('我'徽标)
• 还有很多...

这只是为了展示或试验技术,还是有任何好处.我有兴趣了解它的好处,如果有的话.我问的原因是我无法弄清楚在两种情况下我们都需要生成中间帧(主要是使用补间技术).

我想将border-radius赋予a <nav>,其中所有<a>图像都有背景,但图像保持在border-radius之外.这是为什么？

在CSS Sprites中,您经常会在每个图像之间找到填充.我相信这个想法是这样的,如果页面调整大小,那么一个图像不会流入另一个图像.

我认为这取决于不同类型的浏览器缩放(最好由Jeff解释).

但是,我在测试中未能看到这种行为.这只是旧版浏览器的问题吗？(我目前无法使用IE6进行测试,因此我将其视为"旧").

我还要担心留空吗？这是一种痛苦.

例如 :

我找到的AOL的CSS Sprite在每个图像之间都有填充:VIEW

但The Daily Show决定不打扰:VIEW

对齐图标(左)和文本(右)或左侧相反文本和右侧图标的最佳方法是什么？

图标图像和文字的大小必须相同吗？理想情况下,我希望它们不同但是在同一垂直对齐上.

我使用background-position css属性从更大的图像中获取图标.

我现在就是这样做的,但是我要努力让它们在同一条线上或垂直对齐到底部.

文本

这是我在尝试你的建议后得到的.

虽然文本现在与图标对齐,但它会叠加在我想要的图标右侧的图标上.请注意,我使用背景位置从更大的图像集中显示图标.

基本上我得到了

<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>

group3_drops_icon {
background-position:-50px -111px;
}

.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}

我正在显示一堆缩略图并且延迟可能非常高(通过VPN)所以我将所有缩略图发送到单个文件(如精灵)并设置div的CSS背景图像和背景位置属性显示缩略图.我遇到的问题是使用IE6并弄清楚图像何时加载...我正在使用BackgroundImageCache hack:

document.execCommand("BackgroundImageCache",false,true);

要检查图像何时加载,我使用以下代码:

$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});

这适用于我尝试过的每个浏览器,除了IE6 ...即使缓存黑客它正在加载图像,触发事件,设置背景图像属性并再次下载图像(我的.Thumbnail元素是空白的,而它重新下载).

在我看来,缓存黑客只是改变了CSS引用的行为,而不是img标签.如何加载背景图像而不下载两次？IE6有可能吗？

编辑:使用:document.execCommand("BackgroundImageCache",true,true);似乎工作(两个参数都为'true').我在找到有关BackgroundImageCache命令及其参数的任何文档时遇到了问题(我发现了很多使用它来修复CSS问题的例子,但它们都false,true用作参数而不解释它们)... 赏金对于在BackgroundImageCache命令及其参数上具有良好信息/文档的任何人来说仍然是好的!

(我不知道为什么我因为IE的缺点而浪费了这么多时间后发现一些有用的东西很兴奋)

我有一个div元素,比如宽度为200px,高度为200px.我需要一个小图像出现在div的右上角.人们通常如何做到这一点

background: url(/images/imagepath.png) top right;

但问题是,我正在从精灵加载图像,当我使用类似的东西时

background: url(/web/images/imagepath.png) -215px -759px  top right;

精灵似乎没有从正确的位置选择它.精灵的其他部分被加载.是否可以从精灵加载图像并使用background-position属性.提前致谢...

我想显示一个包含大约6000个小图像缩略图的页面(每个40x40).为了避免发出6000个HTTP请求,我正在探索CSS精灵,即将所有这些缩略图连接成一个长条带并使用CSS来裁剪所需的图像.不幸的是,我发现JPEG文件在任何一个维度上都不能超过65500像素.警惕Web堆栈中的进一步限制,我想知道:以下任何一种都无法应对尺寸为40x240000的图像吗？

• IE浏览器
• 歌剧
• WebKit的
• 任何CSS规范
• 任何HTML规范
• PNG规范

编辑:这样做的目的只是一次显示整个图像集,要求用户最多必须滚动.我希望"微缩略图"流入现有的CSS布局,所以我不能只使用大的矩形图像.我不希望用户必须点击多个页面才能看到所有内容.像素总数不是很大 - 只有2560x1600显示器的两倍.所有微缩略图的总文件大小只有几兆字节.假设每个图像都在浏览器的内存中未经压缩处理,每个像素占用8个字节的存储空间(RGBA加上100%的开销软糖因子),我们正在谈论数百兆字节的RAM使用率; 在2010年的专业申请并非不合理.

我想将所有小图像保存在一个精灵文件中,例如:

现在假设我想添加一个薄的背景图像,它意味着重复x超过100%的元素宽度:

这是否必须存储为单独的实体,还是可以以某种方式将其存储在精灵图像中？如果可以对精灵的某个部分进行背景重复,我无法解决,我想不是,但我很确定我已经看到它在某个地方完成了.