CSS不透明度和文本问题

发布于 2024-09-12 09:12:01 字数 387 浏览 3 评论 0原文

当鼠标指针悬停在链接上时，有没有办法阻止不透明度影响我的链接文本？我只想让不透明度只影响图像。

这是CSS。

.email {
    background: url(../images/email.gif) 0px 0px no-repeat;
    margin: 0px 0px 0px 0px;
    text-indent: 20px;
    display: inline-block;
}

.email:hover {
    opacity: 0.8;
}

这是 xHTML。

<a href="#" title="Email" class="email">Email</a>

原文

is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.

Here is the CSS.

.email {
    background: url(../images/email.gif) 0px 0px no-repeat;
    margin: 0px 0px 0px 0px;
    text-indent: 20px;
    display: inline-block;
}

.email:hover {
    opacity: 0.8;
}

Here is the xHTML.

<a href="#" title="Email" class="email">Email</a>

分享到QQ

分享到微博

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

发布评论

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

走过海棠暮 2024-09-19 09:12:01

简短的回答：否。

详细的回答：是的，如果您使用 rgba 颜色而不是 opacity 属性。例如，以下内容将为您提供不透明度为 20% 的黑色背景和完全不透明度的黑色文本：

p {
    background: rgba(0, 0, 0, 0.2);
    color: #000000;
}

对于背景图像，请使用带有 Alpha 通道的 PNG。

Short answer: No.

Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:

p {
    background: rgba(0, 0, 0, 0.2);
    color: #000000;
}

For background images, use a PNG with alpha channels.

回复收藏 0 原文

め可乐爱微笑 2024-09-19 09:12:01

不使用背景图像（如果只是背景颜色，则可以）。不要使用不透明度，而是将 .email:hover 中的背景图像替换为不透明程度较低的版本。

回复收藏 0 原文

走野 2024-09-19 09:12:01

是的，通过绝对定位将文本从透明容器的上下文中取出。这也适用于背景图像！

<div id="TransContainer">
    <div id="TransBox" href="#">Some text that will be opaque!</div>
    <div id="NonTransText">Some text that I do not want opaque!</div>
</div>

<style>
#TransContainer
{
    position: relative;
    z-index: 100;
    display: block;
    width: 420px;
    height: 165px;
    background-color: blue;
}
#TransBox
{
    background-color: green;
    display: block;
    width: 100px;
    height: 100px;
    opacity:0.4;
    filter:alpha(opacity=40)
}
#NonTransText
{
    color: #000;
    position: absolute;
    top: 20px;
    left: 0;
}
</style>

Yes, take the text out of the context of the transparent container with absolute positioning. This will work with background images as well!

<div id="TransContainer">
    <div id="TransBox" href="#">Some text that will be opaque!</div>
    <div id="NonTransText">Some text that I do not want opaque!</div>
</div>

<style>
#TransContainer
{
    position: relative;
    z-index: 100;
    display: block;
    width: 420px;
    height: 165px;
    background-color: blue;
}
#TransBox
{
    background-color: green;
    display: block;
    width: 100px;
    height: 100px;
    opacity:0.4;
    filter:alpha(opacity=40)
}
#NonTransText
{
    color: #000;
    position: absolute;
    top: 20px;
    left: 0;
}
</style>

回复收藏 0 原文

~没有更多了~