标签: css-sprites

我编写的代码可以根据页面中的IMG标签自动创建CSS sprite,并用DIV替换它们(我认为是)适当的CSS来将精灵图像定位为背景,让相应的部分显示出来 - 问题是我不能让DIV表现为IMG替代品的下降.

如果我将默认的'display'值设置为'block',那么如果原始IMG位于某些文本的末尾,则替换DIV将跳到文本后面的下一行(这当然是我期望的东西) with display:block to do).

如果我将'display'更改为inline,那么DIV与文本保持在同一行,但它忽略了我设置和折叠的'width'和'height'.我已经尝试将其放入DIV内部,但它只占用了足够的宽度来容纳NST.

我已经尝试过将显示设置为所有可能的值(包括"表格行","磨合","紧凑"等"模糊"),但都没有运气.甚至可以创建一个与IMG具有相同布局行为的DIV吗？

我愿意拥有比单个DIV更复杂的东西,但是我已经尝试了那里显而易见的事情(一个DIV在另一个内部DIV设置显示的内部:阻止外部设置显示:内联)但我避风港找不到那种有效的组合.

在替换的IMG/DIV之外我总能做一些特定的事情来获得我想要的布局,但我的目标是拥有一个通用的自动CSS-sprite机制,无论HTML的其余部分如何都能工作.

我试图了解CSS sprites如何提高网站的性能？

如果单个图像的总大小是较小图像的总和,为什么下载几个小图像比下载保存较小图像的单个图像慢？

我们都知道CSS精灵图像非常适合减少请求量等等,但是浏览器的性能如何使用大图像作为背景渲染具有多个元素的页面？

HTTP/2使得可以复用连接,从而无需连接到服务器.通过单个连接,可以将许多单独的图像发送到客户端.这消除了将许多图像组合成一个并使用CSS将其分开的旧图像精灵图案.

我很好奇精灵在HTTP/2世界中是否真的更快.如果是这样,在什么情况下呢？

我有一个包含图像的div列表:

<div class="wizard-img"><%= image_tag("sources/pix/nyt.png") %></div>
<div class="wizard-img"><%= image_tag("sources/pix/theguardian.png") %></div>

当用户点击div时,我希望它将图像更改为x-on.png,再次单击时,它将更改为x-off.png,第三次单击时应恢复为x. PNG.

是否可以在不为每次图像更改手动指定jQuery的情况下执行此操作？我可以遍历div并找到图像名称,只需将-off/-on附加到图像上吗？

谢谢!

1. 是css-sprite好技术？我在http://spriteme.org/上读到了它的专业知识,我也在stackoverflow中看到了很多关于css sprites的问题.

2. 它的缺点是什么？

3. 它会在所有浏览器中工作吗？

我想问一下是否有人能给我一些我想做的设计决定的提示.

我的项目将包含一些精灵(一次在屏幕上预期10到30个),并且有几种方法可以实现它们.一种方法是CSS-Sprites,另一种方法是在画布上绘制它们.两者都不难.背景将是另一个<canvas>在后台绘制的图块地图.

我已经看到Crafty附加了Sprites,<div>因为它在HTML中<canvas>作为CSS-Sprite.我不确定如果<div>在画布中是否存在速度差异.有区别吗？

我希望用户通过鼠标点击,左,右等与精灵交互.精灵当然是在瓷砖地图的元素上站立或行走.那么编写一个处理程序<canvas>并找到精灵更有效率,或者更确切地说使用<div>并让浏览器处理这个发现？

我希望我可以传达我的问题.

我遇到了问题,有一段时间我一直想弄清楚如何解决这个问题.我将在下面详细描述......

我试图将图像用作UL列表的精灵图像.它应该在它旁边显示一个带有文本的图标,图标和文本都应该链接到某个地方.

我的第一个例子看看我是怎么想的.当font-size 设置为10px它看起来没问题......

当我改变font-size来自10px于16px...

这是CSS和HTML

CSS

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 10px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}
#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px …

在构建css图像精灵时,我正在寻找一些最佳实践和提示.问题:考虑一个包含大量图像的网站:

1. 我应该将大小相同的图像分组并放在一起png吗？
2. 什么是可接受的精灵图像大小？是否建议制作不同的精灵图像,而不是一个巨大的文件？!
3. 在一个精灵图像中是否有任何图像数量建议？
4. 如何在精灵图像中放置和对齐图像会有什么不同吗？我只是在http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340中找到了一个提示(保持图像有组织,它将是更可维护)但这是唯一的原因

如果它有帮助:我使用罗盘精灵实用程序,它会自动将图像文件夹转换为一个png文件并css为其创建一个文件.图像自动对齐

在缩放时在Chrome上,带有图像精灵的图标会变得不对齐.当你沿着背景图像走得更远时,位置似乎略微下降.这只发生在Chrome中.

这是CSS.

.feature-icon {
    height: 22px; 
    width: 22px;
    display: inline-block;
    background-image:url(feature-icon-sprite.png);
    background-size: 22px;
}
.schedule {
    background-position: 0 0; 
}
.selections {
    background-position: 0 -22px; 
}
.messages 
    background-position: 0 -44px; 
}
...

这是HTML.

<span class="feature-icon schedule"></span>
<span class="feature-icon selections"></span>
<span class="feature-icon messages"></span>

我在互联网上看过像这样的文章.听起来像Chrome中有一些像素舍入问题.我已经尝试将大小更改为20px以避免出现问题,但在缩放110%时仍然会发生这种情况.