伪元素RGBA箭头颜色与父元素不匹配

我在div（#telegram-join）下创建伪元素箭头，它们都具有背景/边框颜色作为RGBA值（rgba(255, 255, 255, 0.25)），但箭头受到不同的影响并显示比div暗。这是因为它更小？我怎么能匹配他们？谢谢！伪元素RGBA箭头颜色与父元素不匹配

HTML

<div id="telegram-join" class="bg-combo"> 
    <h1><i class="fa fa-telegram"></i> Chat with us on Telegram</h1> 
</div>

CSS：

.bg-combo { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto; 
    border-radius: 8px; 
    padding: 5px 10px; 
    width: fit-content; 
    background-color: white; 
    background-color: rgba(255, 255, 255, 0.25); 
    text-align: center; 
} 

.bg-combo h1 { 
    display: inline-block; 
    font-size: 2em; 
    line-height: 1.5; 
    text-transform: uppercase; 
} 
.bg-combo h1 i { 
    margin-right: 10px; 
} 

#telegram-join { 
    position: relative; 
    margin: 15px auto 25px; 
} 

#telegram-join :after { 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: rotate(-45deg); 
    transform-origin: 50% 50%; 
    margin-left: -15px; 
    margin-top: -15px; 
    border: 15px solid #fff; 
    width: 0; 
    height: 0; 
    border-color: transparent transparent rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.25); 
    content: ''; 
}

演示：CodePen

来源

2017-09-04 Mario Parra

你的背景色（容器的）具有0.25％的不透明度，和伪元件（这是在该元素中）也具有0.25％的不透明度（所以它的背景不再是身体背景，它是容器元素的新背景 - 具有不透明度）。

您可以通过伪元素的透明度设置为0.125％，解决这个问题：

border-color: transparent transparent rgba(255,255,255,0.125) rgba(255,255,255,0.125);

或两个元素的背景设置为你想要的实际颜色：

border-color: transparent transparent #D7D7D7 #D7D7D7;

这里是您的codepen的更新：
https://codepen.io/anon/pen/eEXqaO

来源

2017-09-04 21:59:02 Dekel

Gotcha。我有一种感觉，它可能是一个等级问题。我没有使用十六进制值来简化不透明度控制。谢谢！ –

伪元素RGBA箭头颜色与父元素不匹配

回答

相关问题