我创建了一个精灵,其中包含一整套在Web应用程序中使用的图标。 但是,样式链接时遇到了问题。 我知道使用CSS可以操纵链接的大小并在其周围移动背景图像(精灵),因此我仅在精灵中显示所需的图标。 这对于没有文本的链接非常有用。 但是,如果我有一个带有背景图像和其他文本的链接,那就是我遇到的问题。

看一下这些图像,这将解释我的困境:

我知道我可以在CSS3中“剪切”背景图像,但是在这一点上,我试图避免这种情况,因为我知道主要是较旧的浏览器[例如IE8 X()将访问该网站,并且不会看到此更改。有没有一种方法,而无需在每个链接内放置其他标签(例如<span>标签并设置样式)呢?我已经看到了一些示例,其中可以使用jQuery之类的AJAX库来解决此问题,但是这是一件小事,很多汗水。

我希望这不会造成混淆。

#1楼 票数:1

使用jQuery实际上非常简单:只需为所有此类元素分配一个普通类(如sprite 现在,您可以检查它是否为IE8并运行以下代码:

$('.sprite').toggleClass('sprite').prepend('<span class="sprite"/>')

这将使用sprite类创建一个span 使用一些聪明的CSS,您应该能够将背景移动到带有sprite类的元素。

#2楼 票数:0 已采纳

您需要在子画面中的所需位置放置空白。 这应该够了吧。 就像这样一个> http://css-tricks.com/wp-content/csstricks-uploads/youtube-sprite.png

  ask by Oliver Spryn translate from so

未解决问题?本站智能推荐:

2回复

如何在背景大小的div上缩放背景图像

我想要一个div元素伸展到33%宽度,背景图像用css完成 如何在鼠标悬停或鼠标中对div中背景图像的放大设置动画,是否有插件可以执行此操作? 背景div必须使用background-size:cover,因为它是一个弹性页面。 我没有小提琴,但我不知道在哪里或如何开始
1回复

使背景图像滚动到我的其他图像后面 列

我一直在为我的一个家庭成员开发一个网站,然后将页面分为几列并包裹在div元素中, 但我不知道如何使列居中放置在滚动背景图像上方, 如果我将background div元素放在页面底部,则将背景放在页脚和所有列之间的底部, 如果我将其放在列之前,它将图像放在列上方。 如
1回复

如何在图像达到某一点后停止缩小图像?

我的背景图片很大:1920×1200 这是我如何显示它: 这工作正常但现在我希望能够在达到某个预定范围后停止重新调整吗? 就像当图像缩小到1300 x 500时,它应该停止。 我怎样才能做到这一点?
9回复

多个背景图像定位

我有三个背景图像,全都为643px。 我希望将它们设置为: 顶部图片 (高度12 像素 )不可重复 中间图像 重复 底部图片 (高度12px),不再重复 我似乎无法做到不让它们重叠(这样做是一个问题,因为图像是部分透明的),这样做是否可能?
2回复

更改预定义的身体背景图像

当您单击链接时,我发现此脚本可更改主体的背景图像。 它的工作原理很好,但唯一的问题是我无法在css中拥有预定义的bg图像,否则它将不会更改。 因此,我删除了背景图片的css并将其切换为正确的图片,但我希望默认图片以该图片开头。 脚本: 链接: 而且,例如,我希望页面
3回复

需要全屏背景图片以包含超链接

我有一个使用全屏背景图片的网站登录页面。 我需要图像的“输入站点”部分可以单击到主站点中。 我尝试使用图像映射代码,但是尺寸在较大的显示器上无法正常工作。 有没有一种方法可以使全屏背景图像包含可单击的超链接,以便他们可以单击页面上的任意位置进入? 这是我当前的HTML: 和CSS
4回复

空div标签的背景图像超链接

在我的网站上,我有一个带background-image的空<div> 。 我的<div> 宽度为280像素 , background-image 宽度为165像素 。 所以我只需要165px的链接(仅适用于background-image )。 有可能这样吗?
3回复

CSS背景图片似乎没有在链接旁边创建图标

我使用css , ul和li创建了一个水平菜单。 我也想在每个链接旁边显示一个图标。 但是我为此写的东西行不通。 HTML: CSS: 请检查我的jsfiddle 。 我怎么解决这个问题 ?