css - 使用带有背景图像的 css 作为 anchor 并保留文本？

Question

我总是使用制作带有 -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>

Answer 1

您想使用背景图片并将其放在文本上方(在 y 轴上更高)吗？

1. 将背景图片固定在顶部。
2. 将对象的padding-top设置为对象为图片的高度。
3. 使用display:inline-block(如果你希望内边距不与其他行交叉)

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