标签: css-sprites

嗨,我正在使用图像精灵来显示各种图标.

XHTML

<div class="ListIcons">
    <ul>
    <li class="Icon i-scissors">A list item using the <strong>i-scissors</strong> class.</li>
    </ul>
</div>

CSS

.Icon {background:url(../images/icons/icons.png) no-repeat top left;}
.i-scissors{ background-position: 0 -52px; width: 32px; height: 32px; }

问题

我的问题

如何隐藏正在显示的其他两个图像以及我想要的图像.

请帮忙!

雪碧

我正在使用的Sprite Image是这样的:

我用css sprites制作了一个css菜单,但问题是sprite我们不使用我们在后台使用的内嵌图像,因此如果在浏览器中禁用图像则不显示任何内容.对此有何解决方案？

例如 :

请参阅此菜单并关闭图像:http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html(如果在浏览器中禁用图像,则无法看到)

这个菜单反对这个报价

确保您的网站禁用图片

Creating a site that relies too heavily on images is never a good

Run Code Online (Sandbox Code Playgroud)

理念.虽然几乎已成为过去,但仍然存在以非常低的网速运行的用户.此外,如果用户需要 - 出于任何原因 - 禁用图像,他们仍然可以访问他们需要的所有内容吗？

http://csswizardry.com/quick-tips/#tip-02

我们不应该使用这种类型的导航.

我正在尝试使用CSS Sprites为我的webapp.这是我的网页布局:

<div id="container">
  <div id="header" /> <!-- part of CSS sprite --><br />
  <div id="content" /> <!-- repeats vertically, separate image --> <br />
  <div id="separator"> <!-- part of CSS sprite --><br />
  <div id="footer"> <!-- part of CSS sprite --><br />
</div>

我试过用这个css:

#container {
  background: url(../img/sprite.png) no-repeat top;
  margin: 0px auto;
  width: 800px;
}

#container #header {<br />
  background-position: 0px 0px;
  height: 25px;
}

#container #content {<
  background: url(../img/content.png) repeat-y;
}

#container #separator {
  background-position: 0px -25px; …

我试图找到使用CSS sprites和jQuery复制12fps动画的最简单方法.

我在想使用setInterval()所以每83.33毫秒,下一个sprite将被加载.

我的问题是,我不知道该怎么做......

我在想,因为我的精灵名称是增量的,如:

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

所以,如果我们可以以某种方式增加它,直到我们到达最后一个实例,在这种情况下mariohammerswing5.png,它将循环回到开头.

如果我能弄清楚那部分,我准备好了!:)

有什么建议？

是否有工具允许您将图像作为单个实体上传和维护,但是允许您在图像映射中将它们作为精灵引用？

保持图像精灵是一个真正的痛苦.

谢谢!

我正在为我的视网膜显示媒体查询创建一个精灵,用于iPhone 4的图像尺寸加倍,这大大增加了文件大小.我特别想要增强的元素是按钮和主要标志.结合这些使得精灵非常大,所以我应该单独保存每个按钮,使它们都低于25kb？

这篇文章适合任何可能不了解这个25kb限制的人:http://www.yuiblog.com/blog/2008/02/06/iphone-cacheability/

欢迎所有建议,谢谢

我已经创建了一个精美的joomla网站,其精灵导航在PC上工作正常,但在移动设备和平板电脑上有一些问题:在我"触摸"链接后,背景图像消失了......我该如何解决这个问题？

请参阅http://www.kartika.eu/index.php?option=com_content&view=category&layout=blog&id=15&Itemid=239&lang=en

这是我的CSS的一个例子:

#brands_menu   {
  margin: auto;
}
.tab td {
  display: inline-block;
  height: 153px;
  width: 153px;
  border: none;
}
a.license1:link {
  display:block;
  width:153px;
  height:153px;
  text-indent:-9999px;
  background:url(../images/sprite.png) 0px 0px no-repeat;
  float: left;
  border: none;
}
a.license1:hover {
  display:block;
  width:153px;
  height:153px;
  text-indent:-9999px;
  background:url(../images/sprite.png) 0px -153px no-repeat;
  float: left;
  border: none;

}

HTML片段:

<li class = "li_image"></li>

CSS片段:

li_img {
    width:28px;
    height:32px;
    background:url(https://ssl.gstatic.com/gb/images/v1_90902864.png) 10 15;
}

知道为什么这不起作用吗？此列表项甚至没有出现在列表中.

我正在尝试将悬停功能添加到复选框元素,但正如您在本演示中看到的那样,它无效.能告诉我为什么会这样吗？

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
input[type="checkbox"]:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

我有跟随 CSS精灵.当我尝试显示第一个图标时,它工作正常,但当我将缩放设置为150%时,我也会看到第二个图标的一小部分.此问题出现在Google Chrome和Internet Explorer上,但不适用于Mozilla Firefox:

的jsfiddle

div {
    width: 29px;
    height: 29px;
    background-image: url(http://i.imgur.com/O2Cp0nb.png);
}

<div></div>

这就是它在150%缩放时的样子:

更新:克里斯建议我需要在图标之间放置一些空格.所以我的问题是:为什么？为什么即使没有这个空间,它在Mozilla Firefox上运行良好？