CSS問題與背景色::後

Question

我用下面的HTML/CSS代碼，以使聊天泡泡：

body {background-color: red} 
 

 
.message-sent { 
 
    position:relative; 
 
    padding:10px 20px; 
 
    color:white; 
 
    background:#0B93F6; 
 
    border-radius:25px; 
 
    float: right; 
 
    margin-bottom: 5px; 
 
    margin-right: 30px; 
 
} 
 

 
.message-sent-last::before { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    bottom:-2px; 
 
    right:-7px; 
 
    height:20px; 
 
    border-right:20px solid #0B93F6; 
 
    border-bottom-left-radius: 16px 14px; 
 
    -webkit-transform:translate(0, -2px); 
 
} 
 

 
.message-sent-last::after { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:1; 
 
    bottom:-2px; 
 
    right:-56px; 
 
    width:26px; 
 
    height:20px; 
 
    border-bottom-left-radius: 10px; 
 
    -webkit-transform:translate(-30px, -2px); 
 
    background: red; 
 
}

<div class="message-sent message-sent-last"> 
 
    Hey there! What's up? 
 
</div>

但問題是在CSS的最後一行我不得不重複背景顏色，否則泡泡就會破裂。請檢查了這一點：

body {background-color: red} 
 

 
.message-sent { 
 
    position:relative; 
 
    padding:10px 20px; 
 
    color:white; 
 
    background:#0B93F6; 
 
    border-radius:25px; 
 
    float: right; 
 
    margin-bottom: 5px; 
 
    margin-right: 30px; 
 
} 
 

 
.message-sent-last::before { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    bottom:-2px; 
 
    right:-7px; 
 
    height:20px; 
 
    border-right:20px solid #0B93F6; 
 
    border-bottom-left-radius: 16px 14px; 
 
    -webkit-transform:translate(0, -2px); 
 
} 
 

 
.message-sent-last::after { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:1; 
 
    bottom:-2px; 
 
    right:-56px; 
 
    width:26px; 
 
    height:20px; 
 
    border-bottom-left-radius: 10px; 
 
    -webkit-transform:translate(-30px, -2px); 
 
    background: transparent; 
 
}

<div class="message-sent message-sent-last"> 
 
    Hey there! What's up? 
 
</div>

我想不重複網頁的背景顏色，因爲片段將在幾個地方有不同的背景顏色一起使用。我已經嘗試了透明和繼承，但沒有解決。

這是第二個文檔片斷的樣子：

我在Ubuntu下Chrome和FF測試。

您認爲如何？

Answer 1

在你的情況，因爲它是建立在泡沫的分配背景到div我會建議使用一個變量的相同顏色的根本，所以當身體的顏色改變的更出彩DIV ::後會改變：

添加在你的CSS文件的頂部：

body {background-color: var(--main-bg-color);} 

和DIV：

:root { 
    --main-bg-color: red; 
} 

在你的身體元素

.message-sent-last::after { 
    content:""; 
    position:absolute; 
    z-index:1; 
    bottom:-2px; 
    right:-40px; 
    width:10px; 
    height:20px; 
    border-bottom-left-radius: 10px; 
    -webkit-transform:translate(-30px, -2px); 
    background: var(--main-bg-color); 
} 

這使您可以在根上更改它並使更改對這兩個元素都有效。

請注意，它不會在IE瀏覽器雖然。