标签: css-sprites

IE6是否支持css-sprites？

我想知道是否有任何方法只使用一个图像重复和非重复图像使用CSS精灵.因此,在这种情况下,我想将页面上的所有图像组合在一起,无论宽度和高度如何,以及它们是否将用作重复或非重复图像.我知道标准是使用所有非重复图像创建1个图像,使用所有重复图像创建另一个图像.但我只是想知道我是否可以只使用1张图像.

谢谢.

我有一个图像,按钮垂直对齐.然后我使用css指定"background-position"来显示基于按钮类的正确按钮.我遇到的问题是,当用户按下"cmd +"(或缩放浏览器)时,图像"变大"并开始看到其他按钮(不同的颜色).如何保持背景"固定",以便浏览器不会放大.

提前致谢!

这是CSS:https://gist.github.com/b5d52ab2a2f84ed82fb4

和预览:正常:cl.ly/3d3y2D3c0D0A2T1n0f0G和ZOOOMED:cl.ly/1K2t450p2m3B2x133j04

奇怪的是,这个效果似乎只出现在Safari中(我测试了chrome,safari和firefox)

我使用css精灵在固定宽度设计上显示背景.我改为流畅的布局,但由于背景位置,当浏览器调整大小时背景图像变得不稳定.

是否可以使用具有流体网格背景的css sprite,它在哪里调整布局？

我需要与其他最新浏览器兼容ie 7和8的布局

我已经做了一些谷歌搜索,没有找到在HTML电子邮件中进行图像精灵的指南.所以我有以下问题:

1. 可能吗？
2. 推荐吗？有好处吗？缺点是什么？

我最近读了一篇关于Javascript的文章,其中提到了像Grunt和Ender这样的Build Tools.简要地说,这些工具能够从单独提供的文件生成精灵图像,并且这些构建工具可以集成到构建过程中.

不幸的是,我的谷歌搜索没有公布更多相关信息.这里有没有人有关于这个主题的经验并融入gradle？一些用于进一步阅读的网络资源非常受欢迎!

提前谢谢了!萨沙.

我想在两种不同的场景中使用Compass生成的图标精灵.

1. 使用原始大小的图标.
2. 使用与使用CSS3属性的较小版本相同的图标background-size.

我先这样做:

$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;

现在我可以使用一般创建的CSS类等.logo-twitter.

两个实现我可以使用的第二个结果(darren131/gist:3410875 - 在Compass中调整sprite的大小):

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

.my-other-div-with-small-logos {
    .logo-twitter {
        $spriteName: twitter;
        $percentage: 40;

        @include resize-sprite($logo-sprites, $spriteName, $percentage);
    }
}

但如果我有大约30个徽标,我需要为每个精灵类手动重复这个.

是否可以导入文件夹两次,一次是原始大小,另一次是backround-size属性？或者修改上面提到的方法,在另一个<div class="my-other-div-with-small-logos">图标显得更小的地方自动创建所有类？

或者我在这里想错了方向？

到目前为止,我已经看过很多次,但我从未使用过自己.有人可以解释如何从这个单一的png图像中获取特定的图标图片,例如我用红色选择的图标...使用css

更新 - 20140614:

在没有得到这个问题的任何答案之后,或者在github上,我决定提出自己的问题解决方案.我使用Compass做了很多事情,但它的主要功能在于它能够生成图像精灵.
大多数其他事情可以使用纯SCSS完成.

因此,我写了西兰花精灵.这与ember-cli使用broccoli-sass内置支持SCSS一起使用,能够满足我的需求.

您可以在此处详细了解该过程.

原始问题:

使用Sass,但没有 Compass,是否可以创建CSS sprites？

我正在寻找一种方法来完成等效输出,因为这个Sass + Compass会完成:

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

基本上这将包括两件事:

1. 将几幅图像连在一起
2. 生成background-image将指向连接图像的CSS类,以及它的坐标和尺寸,以显示连接图像的右侧部分.

后者,生成CSS类应该可以使用Sass,但是,前者,连接几个图像,可能吗？如果是这样,怎么办呢？

注意:我不确定之前是否有人这样做过,主要是因为谷歌搜索"没有指南针的sass图像精灵"和"带有sass -compass的图像精灵"根本没有返回任何相关结果.

没有大量的经验,这可能是我的一个简单的错误,但我找不到一个可以在任何地方工作的解决方案...希望堆栈溢出可以拯救我!

我正在尝试使用节点插件sprity创建spritesheet和关联的SASS(.scss)样式表. https://www.npmjs.com/package/sprity

我已经安装了sprity和sprity-sass(以及gulp-sass和我已经使用过的其他人).我在安装过程中遇到了一些错误 - 不知道这些是当前问题的原因,还是如何修复它们(我想我可能已经解决了一些问题,见下文)

gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:355:16)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command "/usr/local/bin/node"    "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/roxy/Dropbox/Shared Sites/CavendishResidential/node_modules/sprity/node_modules/sprity-lwip/node_modules/lwip
gyp ERR! node -v v4.1.2
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not …