的標籤不尊重背景色的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透明度

回答

相關問題