当前位置：文江博客话题详情

使用带有透明度的图像精灵的 CSS 菜单

发布于 2024-10-17 12:19:04 字数 139 浏览 2 评论 0原文

这是我的问题。

我有一个使用图像精灵的菜单，图像具有透明度，但是当我添加 :hover 时，它可以工作，但我仍然能够在最后看到原始图像。

有没有办法让悬停显示我想要的图像并替换原始图像？

谢谢，

马可

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

筱果果 2024-10-24 12:19:04

您可以通过将图像用作 background-image 来替换图像，而不是使用标记。

但大多数时候，这很慢，另一种方法可能是个好习惯：

创建一个旁边有 :hover 图像的图像 [img|hoverImg]
使用背景位置进行样式设置以更改背景。

像这样：

.menuItem
{
    background-image: url('hello.jpg');
    width:100px;
    height:30px;
}

.menuItem:hover
{
    background-position: 100px; /* Or whatever measure your image is */
}

这样做的问题是图像大小是固定的。您确实必须指定它，而不仅仅是对图像执行此操作。

我喜欢这是最好的方式。如果您想在中设置 src，这可以使用 Javascript 来完成，但大多数时候要重得多，因为您必须加载一个来自服务器的额外图像。

You can replace an image by using it as a background-image instead of using the <img> tag.

But most of the times, this is slow and another way is maybe good practice:

Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.

Like this:

.menuItem
{
    background-image: url('hello.jpg');
    width:100px;
    height:30px;
}

.menuItem:hover
{
    background-position: 100px; /* Or whatever measure your image is */
}

The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.

I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.

回复收藏 0 原文

~没有更多了~