css中的氣泡中的不透明度

我使用http://nicolasgallagher.com/pure-css-speech-bubbles/demo/來做氣泡，我想讓氣泡內部和三角形背景的不透明度爲0.7。css中的氣泡中的不透明度

我使用的背景爲： background-color：rgba（0，0，0，0.7）;

和三角形：不透明度：0.7;

但似乎三角形和背景不具有相同的不透明度，我把一個更高的Z指數給三角形，但它沒有幫助。

我的完整的CSS是：

.infoBubble { 
    font-family:arial; 
    font-size:12px; 
    color:#FFFFFF; 
    display: inline-block; 
    position: absolute; 
    padding:6px; 
    background-color: rgba(0, 0, 0, 0.7); 
    background:-moz-linear-gradient(#000, #000); 
    background:-o-linear-gradient(#000, #000); 
    background:linear-gradient(#000, #000); 
    -webkit-border-radius:7px; 
    -moz-border-radius:7px; 
    border-radius:7px; 
    box-shadow: 1px 1px 3px black; 
} 

.infoBubble:after { 
    content:""; 
    position:absolute; 
    bottom:-6px; 
    left:20px; 
    opacity:0.7; 
    border-width:6px 6px 0; 
    border-style:solid; 
    border-color:#000 transparent; 
    display:block; 
    width:0; 
}

這裏的jsfiddle：http://jsfiddle.net/malamine_kebe/QzQzW/

感謝您的幫助！

來源

2013-05-03 Gradislava Bikkulova

這是因爲沒有施加你的主要泡沫的不透明度 - 您的三種款式：

background:-moz-linear-gradient(#000, #000); 
background:-o-linear-gradient(#000, #000); 
background:linear-gradient(#000, #000);

要覆蓋

background-color: rgba(0, 0, 0, 0.7);

http://jsfiddle.net/QzQzW/1/

此外，如果你使用

-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7); 
-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7)); 
filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7));

，而不是

box-shadow: 1px 1px 3px black;

它會讓你的影子正常工作

http://jsfiddle.net/QzQzW/4/

來源

2013-05-03 10:19:48 Pete

非常感謝您的回答和您的修改！ – 2013-05-03 15:00:15

試試這個

.infoBubble { 
    font-family:arial; 
    font-size:12px; 
    color:#FFFFFF; 
    display: inline-block; 
    position: absolute; 
    padding:6px; 
    background: #000; 
    background:-moz-linear-gradient(#000, #000); 
    background:-o-linear-gradient(#000, #000); 
    background:linear-gradient(#000, #000); 
    -webkit-border-radius:7px; 
    -moz-border-radius:7px; 
    border-radius:7px; 
    box-shadow: 1px 1px 3px black; 
    opacity: 0.7; 
} 

.infoBubble:after { 
    content:""; 
    position:absolute; 
    bottom:-6px; 
    left:20px; 
    opacity:0.7; 
    border-width:6px 6px 0; 
    border-style:solid; 
    border-color:#000 transparent; 
    display:block; 
    width:0; 
}

來源

2013-05-03 10:14:39 Pooshonk

這裏是一個不說完美的解決方案：

http://jsfiddle.net/QzQzW/2/

下面列出修改過的部分：

.infoBubble { 
    background-color: rgba(0, 0, 0, 0.5); 
    /* 
    background:-moz-linear-gradient(#000, #000); 
    background:-o-linear-gradient(#000, #000); 
    background:linear-gradient(#000, #000); 
    */ 
} 
.infoBubble:after { 
/* opacity:0.7;*/ 
    border-color:rgba(0,0,0,0.5) transparent; 
}

我改變0.7到0.5只outstand對比。您當然可以將其更改回0.7。

我之所以註釋掉你的linear-gradient，是因爲它被認爲是background-image，所以background-color值可能會被「覆蓋」。

我註釋了你的opacity:0.7，因爲三角形由border組成，沒有任何內容或背景，所以我把這個alpha放到了border-color。

這種解決方案的缺點是，box-shadow似乎總是停留在任何::before和::after僞元素之上，不管我給什麼z-index。

來源

2013-05-03 10:30:37 Passerby

css中的氣泡中的不透明度

回答

相關問題