标签: css-sprites

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

2. 它的缺点是什么？

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

使用CSS精灵进行图像处理时的典型经验法则是,您应该只对较小的图像(如图标)执行此操作,并且实际图像内容应始终通过<img>元素表示.我的问题是:为什么？对于内容图像,spriting的优势是否也值得？

我读过的一个原因是能够使用alt文本,在语法上更正确并且可以被屏幕阅读器访问.然而,当这是一个问题时,难道你不能轻易地使用一个小的透明图像与精灵上面的所有语法糖,呈现真正的视觉内容？

的jsfiddle

编辑:试图实现与此相反的.
_{(而不是两侧的2个固定宽度的div和中间的一个流体宽度div,
我试图在两侧得到2个流体宽度的div,而在中间有一个div)}

我有3个div:A,B和C.

B需要坐在A和C之间的中心位置.

我目前正在做的是与上面发生的事情相匹配.但是,如果A,B和C的容器具有奇数宽度,则某些浏览器将A和C的宽度向下舍入而其他浏览器向上舍入(分别为C 1px太长和1px太短).

_{注意C右边的额外像素}

_{注意C右边的空间是一个像素更薄的像素.}

我不在乎我需要多少嵌套div,但我花了太多时间在这上面!如果某人已经有了解决此问题的确定解决方案,请分享!

注意:
- A,B和C的父级不能隐藏溢出.
- A,B和C不能重叠(它们有半透明的png)

这是我的出发点:JSFIDDLE

在最近的一个Stackoverflow播客中,Jeff谈到了一个单独的图像文件,其中包含遍布整个页面的所有小图像,然后使用CSS剪切它,以便正确显示所有图像.重点是减少服务器请求的数量,以便更快地加载页面.我就像"哇,真的很酷,我真的可以在我们的产品中使用它".

我的问题是:如何用CSS完成这项工作？我需要用背景图像加载图像,但是如何指定大图像中子图像的偏移？也就是说,假设大图像中有一个锤子图标(50px,50px),并且它的大小为32px*32px,我怎么能强制浏览器只显示那个位？

是否有任何工具可以自动将速记css转换为速记？我需要这个原因我想使用SmartSprites,它不能用于速记.

而且还有一个反向的工具,所以在精灵计算后我可以尽可能地缩小css ...

此外,任何其他自动精神的解决方案都是受欢迎的,基本上我正在寻找一些可以集成到构建过程中的命令行工具,以便开发人员仍然可以在原始css代码上进行开发.

SVG图像不是位图,所以(除非我遗漏了一些东西)你不能像在网页上使用的其他图像文件那样做精灵(参见http://www.alistapart.com/articles/sprites).

但是,是否存在仅显示SVG图像的一部分作为CSS背景的等效机制？

例如假想的语法:

div.my-special-svg-div {
    background-image: url(sprite-image.svg#one-shape-in-the-svg-file);
}

我有一个网页,其中包含大约20-50个动态图像(从非静态源提供的图像).这些映像通过基于请求URL的servlet提供.这导致每个图像生成请求,这导致性能衰减.

如果这些图像是静态的,我会创建一个CSS精灵并用一个替换50个请求.因为它们是动态的,所以当然不是那么容易.我正在寻找一个工具/库/方法,我可以使用它来在运行时将这些图像聚合成一个精灵.幸运的是,图像大小是恒定的,对所有人来说都是一样的,这应该会使这更容易.

有什么建议？

像使用Compass的SASS(在SCSS文件中),是否有一种方法(通过扩展或工具)直接从.Less管理Sprite？

有关说明,请查看以下图像.
第一个是我打算实现的目标.它是一个文本输入元素,有两个背景图像,每边一个.
第二个图像是包含我需要的图标的精灵图像.
现在我的问题是,是否可以剪切背景图像以仅显示图像的一部分？此外,是否可以使用多个背景？

第1张图片:

第二张图片:

我正在使用Compass生成CSS sprites.

我找到了一种定义精灵的方法,并在不同的.scss文件中使用它,但我不确定这是否是正确的解决方案.

我能找到的最好的方法是:

• 创建一个_variables.scss部分文件
• 在_variables.scss部分文件中定义精灵
• _variables.scss在每个.scss文件中导入部分

例

_variables.scss文件:

$siteSprite-spacing: 20px; 
@import "siteSprite/*.png";

firstPage.scss文件:

@import "../variables.scss";

.close {
    @include siteSprite-sprite(close, true);
}

secondPage.scss文件:

@import "../variables.scss";

.viewMore {
    @include siteSprite-sprite(arrow, true);
}

这有效,但......

问题是,每次Compass编译scss文件(firstPage.scss,secondPage.scss)时,它会读取_variables.scss部分,然后读取所有图像,每次尝试生成精灵.

结果是编译过程最终结果如下:

   create generated_images/siteSprite-s526a535d08.png
unchanged generated_images/siteSprite-s526a535d08.png
   create css/firstPage.css 
unchanged generated_images/siteSprite-s526a535d08.png
   create css/secondPage.css
unchanged generated_images/siteSprite-s526a535d08.png
   create css/thirdPage.css
unchanged generated_images/siteSprite-s526a535d08.png

这非常慢,因为我在siteSprite图像文件夹中有很多页面和许多文件.

我该如何避免这个问题？