1

我正在使用http://nicolasgallagher.com/pure-css-speech-bubbles/demo/做一个语音气泡，我希望气泡的内部和三角形的背景不透明度为 0.7。

对于我使用的背景： background-color: rgba(0, 0, 0, 0.7);

对于三角形：不透明度：0.7；

但似乎三角形和背景不具有相同的不透明度，我为三角形设置了更高的 z-index 但这没有帮助。

我的完整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/

感谢您的帮助！

4

3 回答 3

0

试试这个

.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-03T10:14:39.287 回答
0

这是因为您未应用主气泡的不透明度-您的三种样式：

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-03T10:19:48.380 回答
0

这是一个不太完美的解决方案：

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为了突出对比。您当然可以将其更改回0.7.

我注释掉你的linear-gradient, 的原因是它被考虑background-image了，所以这个background-color值可能会被“覆盖”。

我注释掉了你opacity:0.7，因为三角形是由 组成的border，而不是任何内容或背景，所以我把那个 alpha 放到border-color.

这个解决方案的缺点是，无论我给出什么，它box-shadow似乎总是停留在任何伪元素之上。::before::afterz-index

于 2013-05-03T10:30:37.103 回答