的标签不尊重背景色的RGBA透明度

在下面的代码片段，当我尝试并应用rgba颜色我的一个标签，它的作用就像是rgb颜色，而不是rgba。所以文字背景是坚实的，但背景的其余部分（来自span而不是a）具有正确的不透明度。

我知道我可以分开:hover查询，它会解决问题，但我想知道为什么它这样做？我究竟做错了什么？

span { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border: 2px solid #00bcd4; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 
span a { 
 
    text-decoration: none; 
 
    color: #00bcd4; 
 
} 
 
span:hover, 
 
span:hover a { 
 
    background: rgba(0, 188, 212, 0.5); 
 
    color: #ffffff; 
 
}

<span><a href="">Link</a></span>

来源

2016-07-28 CalvT븃

span:hover, 
span:hover a { 
    background: rgba(0, 188, 212, 0.5);

这意味着你设置的跨度和 50％不透明的背景上的 “一” 里面。在“a”上，您会看到背景为50％的背景，背景为背景，因此会显得较暗。

解决方案：

span { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border: 2px solid #00bcd4; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 
span a { 
 
    text-decoration: none; 
 
    color: #00bcd4; 
 
} 
 
span:hover { 
 
    background: rgba(0, 188, 212, 0.5); 
 
} 
 
span:hover a { 
 
    color: #ffffff; 
 
}

<span><a href="">Link</a></span>

来源

2016-07-28 12:35:36 Bert

你甚至尝试吗？看看悬停的链接的颜色.... –

@CalvT我编辑了我的代码 – Bert

然后我收回我的downvote :) –

-1

尝试增加不透明度：0.5; in

span:hover, 
span:hover a { 
    background: rgba(0, 188, 212, 0.5); 
    color: #ffffff; 
}

来源

2016-07-28 12:46:16 Mayur

将背景应用于仅跨度和颜色的锚链接。

span:hover { 
    background: rgba(0, 188, 212, 0.5); 
} 
span:hover a { 
    color: #ffffff; 
}

JsFiddle

来源

2016-07-28 12:48:02 MadMarc

的标签不尊重背景色的RGBA透明度

回答

相关问题