标签: css-sprites

在我正在创建的网站上,我有大约100种不同时间显示的缩略图(64x64).在某些页面上,可能只显示5-15个缩略图.在其他人,所有100个都被加载.

我正在考虑使用像CSS sprites这样的技术来显示图像.也就是说,不是每个拇指都有图像标签,而是执行以下操作:

<span class=thumb1"></span>

然后使用CSS将所有拇指拼接在一起的单个图像切片.也就是说,一个图像全部为100个拇指(在这种情况下,为640x640图像).

我的问题:

• 这是一个好主意吗？
• 如果是,我应该在图像出现的所有页面上进行,还是仅在包含所有图像的页面上进行？
• 还有除精灵之外的其他技术可能比简单地包含带有img标签的图像更好吗？

当我有相同的图像用于不同的元素(精灵图像)时,我通常不会再次调用该图像,因为这是一个新的HTTP请求.

我宁愿用:

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

这是保存HTTP请求吗？

或者,如果浏览器是智能的,我可以使用:

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

浏览器是否会发出新的HTTP请求？或者它知道我已经缓存了这个图像？

问题是:我是否通过使用示例1获得了一些东西？

我通常没有制作CSS精灵的问题,但是这个让我难过......而且我不确定如何解决它.基本上我有一个如下所示的导航精灵:

我正在使用标准惯例将它们放在<li>标签中,例如:

<li class="welcome"><a href="#" title="welcome">welcome</a></li>

然后应用CSS来调整背景位置:

#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }

当然我没有想到这一点,但问题发生在悬停.由于您只能定义"方形"区域,当您将鼠标悬停在元素上时,"蓝色"悬停状态将被转移到下一个导航项.

然后我想我必须为每个项目制作单独的图像...但由于重叠的箭头部分,这不会很正常.

也许我必须分开"中间"箭头分离器？我真的不确定.

我在这里难过.有任何想法吗？

我正在研究使用CSS精灵,但不想发明轮子.jQuery或jQuery UI中是否存在支持？或者作为替代方案,一个经过良好调试的jQuery插件

我想要做的与本文完全一样

http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/

但就我而言，左右图像是透明的。因此重复的背景在整个元素中都是重复的。有什么办法可以给左右空间吗？

的HTML

<ul>
    <li class="expanding">Went To The Market</li>
</ul>

的CSS

li.expanding {
    background: url('left.jpg') top left no-repeat,
        url('right.jpg') top right no-repeat,
        url('middle.jpg') top center repeat-x;
    height: 40px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 20px;
    float: left;
}

在此处查看实时示例：http : //css-tricks.com/examples/CSS3-Expanding-Menu/

在我的项目中,我使用了CSS sprites,因为有很多图像,现在我们的SEO团队说图像应该有ALT和TITLE标记.我知道Title和ALT不能在背景上添加.所以他们提出了一个想法,在背景中将html中的透明图像放在那些图像上,但对我来说这似乎非常不合逻辑(如果图像与关键字无关,那么它是如何重要的).所以请帮助我,为了支持你的答案,有什么最合理的理由是什么？所以我可以处理SEO团队.

我的想法,假设你从200x200精灵开始(意味着双分辨率图像是400x400)是这样的:

.sprite {
    background-image:url('1x.png');
    background-repeat: no-repeat;
    background-size: 200px 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .sprite {
        background-image:url('2x.png');
    }
}

实例:http://ov3rkill.com/temp/a5dii52/

我一直在努力确定提供更高分辨率图像的最佳方式(之前我将所有图像分开并单独调整大小),这坦率地看起来太简单了.

谁能看到任何潜在的缺点？我正在玩这个用于生产用途,到目前为止似乎工作.

我的工作正在讨论在我们的网站上部署按钮的最佳方式.一些艺术总监要求纯CSS中的按钮,我更喜欢在Photoshop中制作Spritesheets.我的论点 - 字符串,文字效果,如阴影和别名,从Photoshop中看起来更好看.他们的论点 - 你失去了SEO点,翻译引擎无法改变按钮.

我确信双方都有争论 - 我是否遗漏了这些论点中的任何一个明显的东西？

我正在写一个phonegap应用程序(使用html,css和javascript),我被困在动画部分,虽然我使用简单的基本spritesheet动画.

A)我试图为BASIC方式制作动画,但我有两个问题:

1)如果我没有满格spritesheet至极我可能没有,这也显示空框架,我不知道如何跳过他们,而不需要整个spritesheet转换成一排.(我听说你可以用某种方式定义每一帧,但我真的找不到怎么做,我到处搜索!)

2)旁边的空白帧的动画显示在桌面上很好,但是当我尝试在移动它看起来是这样的(http://jsfiddle.net/alecstheone/5pqmsd4a/4/)犹如步骤和速度都没有同步.如果我尝试在我的移动浏览器中运行jsfiddle,一切都会像在桌面上一样显示.

这是第一个代码:

HTML:

<div id="container">
    <div class="hi"></div>
</div>

CSS:

.hi {
    width: 389px;
    height: 238px;
    background-image: url("http://i.imgur.com/XOmx2Mm.png");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 1.2s steps(6) infinite, playh 0.2s steps(9) infinite;
}
#container {
}
/* .hi:before {
    content: "";
    position: absolute;
    width: 176px;
    height: 108px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; 
}  */
 @-webkit-keyframes playv {
    0% {
        background-position-y: 0px;
    } …

我正在将我的构建系统从具有自定义任务的Grunt移动到Webpack.至于JavaScript模块,它工作得很好,但我不太确定如何使用我的Sass样式表.

我依赖于我的AMD模块中的Sass文件,Webpack可以从中读取并生成bundle.css.但我最好让我的构建管道使用spritesmith生成精灵,然后将图像复制到构建目录并使用Sass mixins生成正确的CSS规则.

我在SO和谷歌上都研究了很多,但没有找到任何人做类似的情况.我应该只使用网络包吗？或者我应该有单独的Grunt任务观看图像,生成精灵然后运行Webpack吗？