使用带有背景图像的css作为锚点并保留文本？答案

【问题标题】：Using css with background image for anchor AND keep text?使用带有背景图像的css作为锚点并保留文本？
【发布时间】：2011-10-20 20:19:22
【问题描述】：

我总是使用文本缩进为 -9999px 的 CSS 按钮来隐藏文本。但是如果我也想显示文本怎么办？

我想将文本放在我正在使用的大图像的底部。我只能让文本显示在顶部。我能做什么？

基本代码：

    .package_EN { background:url(../img/package.png) no-repeat -400px 0px; width:400px; height:293px; font-size:12px; text-decoration:none; display:block; color:#fff; font-family:Arial, Helvetica, sans-serif;  float:left; }
.package_EN:hover { background:url(../img/package.png) no-repeat -400px -301px; width:400px; height:374px; display:block; }

 <div style="margin-top:120px; margin-left:90px; text-align:center;">
<a class="package_FR" href="img/sponsor_package_en.pdf">Cliquez ici pour télécharger</a>
<a class="package_EN" href="img/sponsor_package_fr.pdf">Click to download</a>
</div>

【问题讨论】：

标签： css

【解决方案1】：

您想使用背景图像并将其放在文本上方（y 轴上）？

将背景图片定位到顶部。
将对象的padding-top设置为对象到图片的高度。
使用display:inline-block（如果您希望填充不跨入其他行）

演示：http://jsfiddle.net/HTFvB/ 或 http://jsfiddle.net/HTFvB/1/

【讨论】：

我很接近，但我需要定位背景，因为它是较大图像的一部分，而在锚定到顶部时我似乎无法这样做：背景：url（../img/package .png) 不重复左上角 0px -400px
@Sackling 以后，请在您的问题中提供相关的详细信息和要求。如果您需要剪辑 CSS sprite 的一小部分，请参阅 stackoverflow.com/questions/2770222/… 这是使用 CSS sprites 的缺点
对。很抱歉，在写这个问题的时候我突然想到了。不过感谢您提供的信息。

【解决方案2】：

这里是解决方案，我改变了你的 bg 定位和文本的颜色，所以你可以看到它 http://jsfiddle.net/jalbertbowdenii/RrC4e/

【讨论】：

【解决方案3】：

在<a> 标签上使用 padding-top

【讨论】：

【解决方案4】：

这可以通过line-height 完成。在这种情况下，您需要将 line-height 设置为 2 * [height of link] - [font-size] 之类的值。使用你的价值观：

.package_EN { line-height: 574px; } /* (293 * 2) - 12 */

根据需要进行调整。

【讨论】：

或者我误解了这个问题，我以为是关于如何让锚文本到锚元素的底部。
这似乎将整个事情推倒，而不仅仅是文本