如何在顶部链接中添加图像而不是文本“我的购物车” - Magento答案

【问题标题】：How to add an image instead of text 'My Cart' in top link - Magento如何在顶部链接中添加图像而不是文本“我的购物车” - Magento
【发布时间】：2012-02-25 06:31:24
【问题描述】：

这可能是一些非常简单的事情，我尝试了几件事和各种帖子，但似乎没有一个能正常工作。

我想在顶部链接中使用购物篮图片而不是“我的购物车”文本。如何让此图像显示为链接而不是文本？

此图片位于 mytheme/images 中。我已经尝试编辑 Checkout/Block/Links.php，通过放置编辑 styles.css

.top-link-cart { background url(HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/mytheme/images/cart.png)left center no-repeat; }

但似乎无法获取图像而不是文本。任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： php html css zend-framework magento

【解决方案1】：

您的 CSS 中有以下错误：

背景后缺少冒号 (:)
网址和关键字之间缺少空格
您的图片链接是绝对的而不是相对的（不是错误，但会让网站更容易上线）

你的代码应该是这样的：

.top-link-cart { background url('../images/cart.png') left center no-repeat; }

【讨论】：

感谢您的回复。这确实奏效了。只需在背景 n url 之间使用冒号。非常感谢。你觉得你能告诉我如何在顶级类别菜单名称旁边添加一张图片吗？
我不确定您指的是哪些类别；你有链接吗？我建议只找一门你可以上的课
如何在“我的购物车”文本旁边添加一个小购物车图标？

【解决方案2】：

使用background:url('image link') no-repeat 并定义然后定义您的width 和height 并确保您定义text-indent: -9999px 或更高的数字，这样您将留下图像并且您的文本将不在屏幕。

这里有很多其他方法可以用于 Css 图像替换： http://css-tricks.com/css-image-replacement/

【讨论】：

【解决方案3】：

我会建议图像的 URL 不正确，在我看来，您好像在尝试使用磁盘上的位置来显示它。它实际上需要是与您网站的根目录相关的位置。

例如，如果网站根目录是 HD/Applications/MAMP/htdocs/，那么您需要将 URL 设为 /devsite/skin/frontend/default/ats_the‌me/images/cart.png。

或者，您可以使其相对于您的 css 文件。因此，如果您的 css 文件位于 HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/ats_the‌me/css/ 中，您可以将 url 更改为 ../images/cart.png

【讨论】：

我已经尝试了这两种组合，但它们似乎仍然不起作用。
它刚刚工作。很抱歉，我之前在背景 n url 之间缺少了一个冒号。我已经写了../images/cart.png 并且它有效。您认为您知道如何在顶级类别的菜单名称旁边添加图片吗？

【解决方案4】：

在background:之后加一个冒号？

【讨论】：

这是我的代码，是不是错了？ .top-link-cart { margin-left:40px; background:url(HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/ats_theme/images/cart.png) no-repeat; width:10px; height:10px; text-indent: -9999px;}
您的代码显示正确。你现在遇到什么问题？丢失的冒号是我看到的第一个看起来会引起问题的东西。看到图片了吗？
不，我没有看到任何图像。我仍然只看到我的购物车文字。我已经在我的 css 文件中添加了这一行并检查了我的文件夹，即使图像存在 n 也在正确的位置。我不知道为什么图像仍然没有出现
1.尝试使用 Firebug 检查该元素。 2. 将鼠标悬停在背景属性 URL 上并确保图像出现。 3. 如果没有 - 您的路径有问题。 4. 如果是 - 尝试指定图像的 X 和 Y 位置，例如 background:url(HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/ats_the‌me/images/cart.png) 0 0 no-repeat; 5. 修改 X 和 Y 值直到看到图像，然后将这些值保存在 CSS 文件中（Firebug 不会编辑文件, 它只是修改它们以便你可以调试）。