如何在css中通过class/id调用精灵图片？

文章/答案/技术大牛

发布

1回答

html、css、image、sprite

我现在正在创建一个网站，其中包括许多微小的图像，如箭头和按钮。我必须将所有这些微小的图像都包含在同一个sprite图像中。我使用了一个在线工具来创建sprite，并且我得到了一个css文件，该文件指示了sprite中的不同图像作为输出，以便将它们包含在我的项目中。我可以使用以下方法在我的html文件中检索sprite图像：我的问题是。如何将url链接替换为s

浏览 14提问于2017-01-07得票数 1

回答已采纳

2回答

我已经把所有微小的蓝色徽标图片作为精灵放在我客户的网站上，但它们在某些浏览器中一直被切断……试着缩小你的浏览器窗口，你会看到部分图片消失了。我不知道为什么会发生这种事。下面是HTML的一些示例代码。<div class="fourCol"> <div id="firstSecond" class="centerContent" style="width:48px;height:48px;"&

浏览 0提问于2013-07-20得票数 0

回答已采纳

2回答

一种很好的面向对象方法(c++)

c++、performance、methods、sdl

我正在制作的游戏有两个类，这两个类是：sprite类由图像的图像缓冲区、(x，y)偏移量以及宽度和高度组成。graphics类有一个用于屏幕的缓冲区。屏幕缓冲区可以包含一些内容，比如精灵的图像缓冲区。void Graphics::blit(Sprite sprite) // code或者甚至这样(也在graphics类中)： void Graphics::blit我是这样做的：

浏览 0提问于2011-12-17得票数 3

回答已采纳

7回答

处理图像繁重的网页

javascript、html、css、http

我是不是应该把所有这些都放在一张大图片里，然后用一堆老套的CSS让它只有一个请求呢？

浏览 9提问于2010-08-06得票数 5

回答已采纳

4回答

如何为jquery鼠标事件添加速度

jquery、image、performance、background、mouseenter

$("document").ready(function () { $(this).css('background-image','url("images/image1.jpg")'); $('.image1').mouseleave(function(){ $(this).css('

浏览 1提问于2014-04-29得票数 1

2回答

如何使用CSS精灵？

css、css-sprites

我试图弄清楚如何使用CSS雪碧在一个精灵形象与4个精灵。这是一幅图像：最后两个如何展示？如何显示第三和第四精灵自己？

浏览 1提问于2019-03-15得票数 1

回答已采纳

2回答

做一个内联图像精灵最好的方法是什么？

html、sprite

经过一些研究，我发现我可以拉伸一个透明的GIF到精灵的大小，并设置背景的精灵图像的偏移量。background: -88px -223px > 这是创建内联图像精灵的最好

浏览 0提问于2012-03-10得票数 1

回答已采纳

4回答

多个图像与精灵工作表

css、httprequest

我的意思是，额外的CSS图像操作(背景定位大图像并裁剪它)能补偿较少的HTTP图像请求吗？

浏览 1提问于2011-08-07得票数 6

回答已采纳

3回答

将div中的所有内容设置为固定大小

css

如何调整div标记中的所有内容的最大大小、宽度和高度<div style="width: 300px; height:60px">dynamique content </div> 但是，如果我有图片，图像，如果它比div大，图像不会调整到div，相反，div会变得更大。

浏览 0提问于2012-09-22得票数 1

3回答

使用css精灵定位div:有没有办法自动垂直居中以获得更整洁的结果？

jquery、css、alignment、sprite

我是附加div，因为他们是需要的，每个div的背景是从css精灵，这是完美的工作。我想要的是垂直居中，每个添加的div，以便他们更整齐地排列。

浏览 0提问于2012-06-18得票数 0

回答已采纳

3回答

悬停和点击状态下具有不同图像的锚/图像

jquery、html、css

我有点困惑该怎么做，因为我以前没有这样做过，但我有3张图片：我该如何设置这3个镜像

浏览 0提问于2012-05-22得票数 0

回答已采纳

2回答

我想使用img精灵，但我不确定这是否可行

css

我想使用图像精灵来提高性能，但是在这种情况下我该怎么做呢？<div class="tileFlip"> <a class="

浏览 0提问于2012-12-04得票数 0

2回答

我怎样才能做一个上票/下票按钮？

html、css、xhtml、stylesheet、styling

这只是为了样式，我正试着像在SO和Reddit上一样投赞成票/反对票，从我可以看到的是，他们使用箭头图像作为背景，然后定位它，但我是一个CSS新手，我需要有人带我完成它。提前谢谢。

浏览 0提问于2010-11-25得票数 27

回答已采纳

4回答

显示图标的最有效的语义方法是什么？

html、css、icons、background-image

在开始之前，我阅读了这个非常有用的问题，它列出了使用<img>'s和background-images. 的利弊。以下是我看到图标呈现的唯一其他方式：在某些情

浏览 4提问于2010-10-01得票数 2

1回答

CSS Sprite未显示

css、sprite

这个图片是一个更大的"icons.png“文件的一部分，我用它来保存博客的库存图片，所以我决定把它作为一个精灵放进去(因为我无论如何都要对其他图标这么做)。HTML： <p>This article is my <?php echo numeral(article_id()); ?></p> <div class="

浏览 6提问于2013-03-15得票数 1

1回答

Firefox Sprite工作表图像未显示

css、firefox、google-chrome、sprite

当用户在聊天室中输入诸如:)之类的表情符号时，CSS将从精灵工作表中取出适当的图像。但我的代码似乎只适用于Opera和IE (奇怪的组合)。它不会在火狐或Chrome浏览器中显示(如果你设法精确定位图片的位置，你可以找到图片的blank.gif，它被用来替代背景url)。有没有人知道Firefox/Chrome中可能出现这种情况的原因？网址：image.emo { height

浏览 2提问于2010-03-31得票数 1

回答已采纳

3回答

使用窗口移动li/背景图像

javascript、jquery、html、css、background-image

如何在调整大小时随窗口移动背景图像？我正在使用一个精灵，但如果它太难做到这一点，我可以改变背景图像为单一的图像。我的代码如下：<nav class="topNav"> <li id="daily_sale" class="deselect"></a><&

浏览 1提问于2013-11-21得票数 1

5回答

如何使用html/css进行图像翻转？

html、css、image、text、rollover

在我的主页上，我有一系列展示我作品的图片。我希望能够悬停在图像上，以便他们有一个覆盖显示项目的名称和它属于什么类别。HERE';" </img>然而，当我尝试这种方法时，它在预览中不起作用我还读到过，你可以使用CSS方法，通过创建一个图像，让你想要滚动的两个图像彼此相邻。

浏览 0提问于2014-03-15得票数 0

1回答

我的网站执行情况报告

html、css、twitter-bootstrap-3、responsive、gtmetrix

影响页面加载速度的问题下面从abc.com提供的图像应该使用CSS精灵组合成尽可能少的图像。使用CSS精灵将图像组合到尽可能少的文件中，可以减少往返次数和下载其他资源的延迟，减少请求开销，并可以减少网页下载的字节总数。以下图像缺少宽度和/或高度属性。. 512 .com/banner.jpg(维数:512 x 33) 我可以用CSS精灵</e

浏览 0提问于2019-07-26得票数 0

回答已采纳

2回答

重新共享应用程序中的帖子

facebook-graph-api、share

当我直接贴到我的墙上时，我的朋友们可以通过点击“共享”链接(在操作列表中的最后一个:例如*注释*共享)选择“重新分享”帖子。

浏览 1提问于2011-08-24得票数 0

点击加载更多