设置菜单不透明度，但在 CSS 中保持文本不透明

发布于 2024-09-15 21:22:32 字数 139 浏览 6 评论 0原文

如何创建一个只有背景透明的菜单？文本应保持不透明（不透明度：1）

如果我设置

li:hover {
    opacity: 0.5
}

整个列表项变得透明。我该如何解决这个问题？

原文

How can I create a menu which only its background is transparent? The text should keep opaque (opacity: 1)

If I set

li:hover {
    opacity: 0.5
}

The whole list item becomes transparent. How do I fix that?

分享到QQ

分享到微博

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

发布评论

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

她如夕阳 2024-09-22 21:22:32

CSS3 中有一个名为“rgba”的新值，允许您使用透明颜色作为背景颜色。例如：

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

我相当确定这应该可行，尽管我只是当场编写了代码，所以它可能不会。然而，这会给你的菜单带来白色的色调。不过，如果您想了解有关 RGBA 的更多信息，请访问此处：http://css-tricks。 com/rgba-browser-support/

There is a new value in CSS3 called "rgba" that allows you to use a transparent color as a background color. For instance:

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

I'm fairly sure that should work, though I just wrote the code on the spot so it may not. This will, however, give your menu a white-ish tinge to it. If you want to read more about RGBA, though, go here: http://css-tricks.com/rgba-browser-support/

回复收藏 0 原文

江南月 2024-09-22 21:22:32

您需要使用透明 PNG 图像或 rgba 颜色value，用于

的背景，例如：

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

或者：

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

You’ll need to use either a transparent PNG image, or an rgba colour value, for the <li>’s background, e.g.:

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

Or:

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

回复收藏 0 原文