将CSS背景图像重复悬停在锚标记上

我在mac上遇到了这个问题，最近我遇到了只有mac的大胆字体问题，但是这个问题已经通过CSS修复。将CSS背景图像重复悬停在锚标记上

问题：我有10个锚定标记绝对定位，当悬停（绿色背景图像）时，PC上没有任何重叠问题，但在几乎所有浏览器的Mac上，图像在下一句中重叠一点。

enter image description here

CSS为上述（悬停）：各元素的

.homeText a:hover { 

    background-image: url('/cont-img/on-hover-span_background-partial-solid.jpg'); 
    color: White; 
    cursor: pointer; 
    background-position: center; 
    background-repeat:repeat; 
    margin-right:-5px; 
    font-style: italic; 
}

的CSS绝对定位有大量的句子之间的空间，所以这不是一个问题。另外，最后的时间段是2个不同图像的精灵，悬停的白色时段和悬停的灰色时段。为此，我将一个CSS类添加到定位标记末尾的span标记中，该标记为span标记中的精灵设置背景位置。

有什么想法？

来源

2012-03-27 Ben Sewards

很高兴有一个[jsfiddle]（http://www.jsfiddle.net）重新生成您的情况。将“overflow：hidden”添加到锚时会发生什么？当你可以简单地使用'background-color'时，为什么你会使用纯色背景图片？ – 2012-03-27 19:31:11

我需要某种颜色来匹配相应的图像横幅，并且由于碰巧没有接近网页安全颜色的位置，纯色的背景图像是唯一的其他解决方案。我会尝试溢出隐藏。我认为问题在于当锚点变成斜体时，长度会增加。 – 2012-03-27 19:37:40

你说你使用绝对定位，是吗？那你怎么定位你的锚？我的意思是，你怎么知道把它们放在哪里？ – 2012-03-27 19:38:44

因为我在每个锚点内都有一个span标记，所以我意识到我必须在Timmerz的帮助下从每个个案中删除填充和边距。我获得比预期更多的背景图像重叠的最重要原因是因为跨度的宽度对于周期仅占用的像素量而言不必要的大，从而为重叠创建更多空间。

将spans设置为与精灵图片成比例的宽度后，我添加了一个小补丁，使得背景图像不会与sprite太靠近。另外，由于上述调整，我必须调整我对正确案件的绝对立场。

感谢大家的贡献。

来源

2012-03-28 13:46:27

确保您有padding:0; margin:0;并确保<a>在该期限后没有包含空格。另外，为什么你使用背景图片？你不能只设置background-color:green？...你可能想尝试一下，看看它是否有任何不同。

来源

2012-03-27 19:32:18 Timmerz

我需要某种颜色来匹配相应的图像横幅，并且由于它恰好没有接近网页安全颜色的位置，因此纯色的背景图像是唯一的其他解决方案。我可以尝试删除保证金，并通过绝对定位进行更改。我会让你知道那是怎么回事。 – 2012-03-27 19:36:43

是有道理的。让我知道事情的后续。 – Timmerz 2012-03-27 19:38:35

我想我遇到的问题是我在每个锚的末尾都有一个span标记，并且span标记不会在锚标记内部生成任何空间。因此，如果我只是使用绝对定位，而没有跨度CSS上的任何边距和填充，则跨度不会出现。 – 2012-03-27 19:55:08

我相信这只是一个字体问题。当我在Linux中访问您的网站时，它们之间的链接比Windows中的要多得多。顺便说一句，也许有点偏离主题，但是你的网站不能非常好地处理非白色背景颜色。您可能想要自己设置背景颜色，而不是依赖用户的默认设置。

来源

2012-03-27 19:52:09

它是背景图像，而不是颜色。因此我自己渲染“颜色”。我想我遇到的问题是我在每个锚的末尾都有一个span标记，并且span标记不会在锚标记内部生成任何空间。所以如果我只是使用绝对定位，没有任何边距和填充，跨度不会出现。 – 2012-03-27 19:54:38

对不起，我应该已经发布了所有的CSS： -/ – 2012-03-27 19:55:39

不，我的意思是网站本身的背景颜色，它保留为用户的偏好设置，而其上的文本为深灰色。冲突。使用'body {background-color：white}'。 – 2012-03-27 19:58:52

将CSS背景图像重复悬停在锚标记上

回答

相关问题